vuex 学习笔记 01

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

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

html

<h3>Count is {{ counterValue }}</h3>
<div>
  <button @click="increment">Increment +1</button>
  <button @click="decrement">Decrement -1</button>
</div>

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)
      }
    }    
  }
})

预览
http://jsbin.com/cofupo/edit?...

如果上面代码不用 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 来进行。