update counter hot example to use new API

Author: yyx990803

examples/counter-hot/Counter.vue

@@ -12,15 +12,16 @@
 </template>
 
 <script>
-import store from './store'
+import * as actions from './store/actions'
+import { recentHistory } from './store/getters'
+
 export default {
-  computed: {
-    count () {
-      return store.state.count
+  vuex: {
+    state: {
+      count: state => state.count,
+      recentHistory
     },
-    recentHistory: store.getters.recentHistory
-  },
-  methods: store.actions
-
+    actions: actions
+  }
 }
 </script>

examples/counter-hot/main.js

@@ -1,7 +1,9 @@
 import Vue from 'vue'
+import store from './store'
 import Counter from './Counter.vue'
 
 new Vue({
   el: 'body',
+  store,
   components: { Counter }
 })

examples/counter-hot/store/actions.js

@@ -1,19 +1,16 @@
 import { INCREMENT, DECREMENT } from './mutation-types'
 
-export default {
+export const increment = ({ dispatch }) => dispatch(INCREMENT)
+export const decrement = ({ dispatch }) => dispatch(DECREMENT)
 
-  increment: INCREMENT,
-  decrement: DECREMENT,
-
-  incrementIfOdd: ({ dispatch, state }) => {
-    if ((state.count + 1) % 2 === 0) {
-      dispatch(INCREMENT)
-    }
-  },
-
-  incrementAsync: ({ dispatch }) => {
-    setTimeout(() => {
-      dispatch(INCREMENT)
-    }, 1000)
+export const incrementIfOdd = ({ dispatch, state }) => {
+  if ((state.count + 1) % 2 === 0) {
+    dispatch(INCREMENT)
   }
 }
+
+export const incrementAsync = ({ dispatch }) => {
+  setTimeout(() => {
+    dispatch(INCREMENT)
+  }, 1000)
+}

examples/counter-hot/store/getters.js

@@ -1,10 +1,8 @@
-export default {
-  recentHistory (state) {
-    const end = state.history.length
-    const begin = end - 5 < 0 ? 0 : end - 5
-    return state.history
-      .slice(begin, end)
-      .toString()
-      .replace(/,/g, ', ')
-  }
+export function recentHistory (state) {
+  const end = state.history.length
+  const begin = end - 5 < 0 ? 0 : end - 5
+  return state.history
+    .slice(begin, end)
+    .toString()
+    .replace(/,/g, ', ')
 }

examples/counter-hot/store/index.js

@@ -13,20 +13,14 @@ const state = {
 
 const store = new Vuex.Store({
   state,
-  actions,
-  mutations,
-  getters
+  mutations
 })
 
 if (module.hot) {
-  module.hot.accept(['./actions', './mutations', './getters'], () => {
-    const newActions = require('./actions').default
-    const newMutations = require('./mutations').default
-    const newGetters = require('./getters').default
+  module.hot.accept(['./mutations'], () => {
+    const mutations = require('./mutations').default
     store.hotUpdate({
-      actions: newActions,
-      mutations: newMutations,
-      getters: newGetters
+      mutations
     })
   })
 }