convert counter example to new API

Author: yyx990803

examples/counter/Counter.vue

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

examples/counter/actions.js

@@ -0,0 +1,14 @@
+export const increment = ({ dispatch }) => dispatch('INCREMENT')
+export const decrement = ({ dispatch }) => dispatch('DECREMENT')
+
+export const incrementIfOdd = ({ dispatch, state }) => {
+  if ((state.count + 1) % 2 === 0) {
+    dispatch('INCREMENT')
+  }
+}
+
+export const incrementAsync = ({ dispatch }) => {
+  setTimeout(() => {
+    dispatch('INCREMENT')
+  }, 1000)
+}

examples/counter/main.js

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

examples/counter/store.js

@@ -3,56 +3,22 @@ import Vuex from '../../src'
 
 Vue.use(Vuex)
 
-// mutation types
-// optional if you don't like constants.
-const INCREMENT = 'INCREMENT'
-const DECREMENT = 'DECREMENT'
-
 // root state object.
 // each Vuex instance is just a single state tree.
 const state = {
   count: 0
 }
 
-// actions are what components will be able to
-// call as store.actions.xxx
-// note these are not the final functions the
-// components will be calling.
-const actions = {
-
-  // for simple actions that just dispatches a single mutation,
-  // we can just provide the mutation type.
-  increment: INCREMENT,
-  decrement: DECREMENT,
-
-  // for a normal action function, it always recieves the store
-  // instance as the first argument, from which we can get the
-  // dispatch function and the state object. Any additional
-  // arguments will follow the store argument.
-  incrementIfOdd: ({ dispatch, state }) => {
-    if ((state.count + 1) % 2 === 0) {
-      dispatch(INCREMENT)
-    }
-  },
-
-  // Same thing for async actions.
-  incrementAsync: ({ dispatch }) => {
-    setTimeout(() => {
-      dispatch(INCREMENT)
-    }, 1000)
-  }
-}
-
 // mutations are operations that actually mutates the state.
 // each mutation handler gets the entire state tree as the
 // first argument, followed by additional payload arguments.
 // mutations must be synchronous and can be recorded by middlewares
 // for debugging purposes.
 const mutations = {
-  [INCREMENT] (state) {
+  INCREMENT (state) {
     state.count++
   },
-  [DECREMENT] (state) {
+  DECREMENT (state) {
     state.count--
   }
 }
@@ -61,12 +27,11 @@ const mutations = {
 // and the mutations. Because the actions and mutations are just
 // functions that do not depend on the instance itself, they can
 // be easily tested or even hot-reloaded (see counter-hot example).
-// 
+//
 // You can also provide middlewares, which is just an array of
 // objects containing some hooks to be called at initialization
 // and after each mutation.
 export default new Vuex.Store({
   state,
-  actions,
   mutations
 })