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 來進行。