自己对 Vuex 一直都不是很熟，所以想再进行一次积累，看看自己还有什么可以补足的。

Vuex 的配置

1.Vuex 安装

在项目根目录终端执行

  1. #安装 vuex
  2. cnpm install vuex --S

2.创建 Vuex 文件

我们需要在项目根目录下建立一个文件夹，我们命名为 store ，在这个文件夹内，我们创建一个 js 文件，命名为 index.js。
在 index.js 中输入

  1. import Vuex from 'vuex'
  2. import Vue from 'vue'
  4. Vue.use(Vuex);
  5. const store = new Vuex.Store({        //创建一个 Store 的实例
  6.         state:{
  7.         count:0
  8.     }
  9. })
  11. export default store

3.修改 main.js 文件

修改根目录中的 main.js 文件，在这个文件中加入：

  1. import store from '../store'
  2. new Vue({
  3.     ...
  4.   store
  5.   ...
  6. })

在这之后，我们就能够在 index.js 中使用 vuex 了。

Vuex 的常用属性和方法

首先，我们可以看看在其他地方该如何调用 Store 的实例中的对象和属性。
我们假设现在有一个 .vue 文件，命名为 count.vue，我们在这里面进行 Store 实例的访问。

  1. <!-- count.vue -->
  3. <template>
  4.   <div>
  5.     <p>{{msg}}</p>
  6.     <button @click="showMsg()">showMsg</button>
  7.   </div>
  8. </template>
  10. <script>
  11.   export default{
  12.       name:'count',
  13.     data(){
  14.         return{
  15.           msg:null
  16.       }
  17.     },
  18.     methods:{
  19.         showMsg(){
  20.           this.msg = this.$store.state.count
  21.       }
  22.     }
  23.   }
  24. </script>

这样就可以进行 Store 实例的访问。
那么，我们如何改变其中的数值呢？比如，我们想改变 count 具体的值。这时，我们就可以用到 Store 实例中的mutations和actions方法。

同样是刚才的那个例子。
我们先修改 index.js 

  1. import Vuex from 'vuex'
  2. import Vue from 'vue'
  4. Vue.use(Vuex);
  5. const store = new Vuex.Store({        //创建一个 Store 的实例
  6.         state:{
  7.         count:0
  8.     },
  9.       mutations:{                        // mutations 属性
  10.         addCount(state){        // 表明 state 对象
  11.           state.count ++ 
  12.          }
  13.     },
  14.          actions:{
  15.         takeAddCount(context){        // context 代表一个与 store 这个对象拥有完全相同属性及方法的对象
  16.           context.commit("addCount")            // context.commit(methodName) === this.$store.commit(methodName)
  17.       }     
  19.     }
  20. })
  22. export default store
  1. <!-- count.vue -->
  3. <template>
  4.   <div>
  5.     <p>{{this.$store.state.count}}</p>
  6.     <button @click=incrsCount()>incrsCount</button>            // 使用 mutations
  7.     <button @click=incrsCount2()>incrsCount</button>            // 使用 actions
  8.   </div>
  9. </template>
  11. <script>
  12.   export default{
  13.       name:'count',
  14.     data(){
  15.         return{
  16.           msg:null
  17.       }
  18.     },
  19.     methods:{
  20.         incrsCount(){
  21.           this.$store.commit("addCount")                使用 commit 方法
  22.       },
  23.       incrsCount2(){
  24.           this.$store.dispatch("takeAddCount")        使用 dispatch 方法，dispatch 在英语中有派遣的意思
  25.       }
  26.     }
  27.   }
  28. </script>

虽然这两种方法（mutations 和 actions）都能导致数据的变化，但内在的实现机制有区别。

mutations 同步处理

我们来用官方的一个例子来说明问题：

  1. mutations: {
  2.   someMutation (state) {
  3.     api.callAsyncMethod(() => {
  4.       state.count++
  5.     })
  6.   }
  7. }

在这个例子中，mutations 虽然能完成数据的最终处理，但是其无法在 devtool 中追踪和检测其中的数据的变化。

actions 异步处理

正因为 mutations 存在无法追踪和检测数据的变化的原因，所以我们需要利用 actions 处理 mutations 中的函数，来进行一些异步操作。
实际上，actions 还有一种写法：

  1. actions:{
  2.     doAction({commit}){
  3.       commit(methodName)        // commit === context.commit === this.$store.commit
  4.   }
  5. }


( actions 和 mutations 的一些更细的区别还不大清楚，有待研究。