以下针对 vuex 1.x 及 某些0.x 版本

有个非常简单的 tutorial, 我这里在精简一下，代码大概如下：

html

Count is {
   { counterValue }}
    
  
     Increment +1  
     Decrement -1
    

js

new Vue({  el: 'body',  store: new Vuex.Store({    state: {      count: 0    },    mutations: {      INCREMENT: function(state, amount) {        state.count = state.count + amount      },      DECREMENT: function(state, amount) {        state.count = state.count - amount      }    }  }),  vuex: {    getters: {      counterValue: function(state) {        return state.count      }    },    actions: {      increment: function({ dispatch, state }){        dispatch('INCREMENT', 1)      },      decrement: function({ dispatch, state }){        dispatch('DECREMENT', 1)      }    }      }})

预览

如果上面代码不用 vuex 实现的话会非常简单，html 代码不变，js 更新如下：

new Vue({  el: 'body',  data: {    counterValue: 0  },  methods: {    increment: function(){      this.counterValue = this.counterValue + 1;    },    decrement: function(){      this.counterValue = this.counterValue - 1;    },      }})

通过上面的代码对比， vuex 把应用的数据和修改数据的方法放在了一个 store 对象里面统一管理, 对数据的获取和操作则分别通过 vm 新增建的配置属性 vuex 的 getters 和 actions 来进行。