Vuex瞭解

State

Vuex是用來管理某個應用的整個狀態，那麼一個應用只能有一個Vuex實例。和React同樣，Vuex也不容許直接去修改state，而是經過提交mutation，來觸發狀態變動。Vuex的狀態存儲是響應式的，若store中的狀態發生變化，相應的組件也會獲得相應的高效更新。從store的實例中讀取狀態最簡單的方法是在計算屬性中返回某個狀態。例如：每當store.state.count變化的時候，都會從新求取計算屬性，以後觸發更新相關聯的DOM.

Getter

爲何會定義Getter呢？這是由於若是你想從store的state中派生出一些狀態，例如對列表進行過濾並計數。這時咱們會首先想到使用computed。就是使用計算屬性，這樣在state變化時，DOM也能作出及時變化。可是若是你想將這個方法用到多個組件中，這時候也許你會複製此段代碼，或者抽象成一個模塊，在多個組件中引入。這兩個辦法看起來都不是一個好方法。

所以，Vuex定義了Getter，這個方法放在store中，這時候能夠供給多個組件同時使用。由於Getter的產生是由於想從state中派生出一些狀態，因此getters中的方法的第一個參數是state。第二個參數能夠是getter。

Mutation

Mutation意爲變更。前面說過更改Vuex的store中的狀態的惟一辦法是提交mutation。Vuex中的mutation相似於事件：每一個mutation都有一個字符串的事件類型（type）和回調函數（handler）。這個回調函數就是實際進行狀態更改的地方，而且他會接受一個state做爲第一個參數。就像事件觸發同樣，不能直接調用mutation的回調函數，得將其喚醒，而喚醒handler的方式就是提交（commit）mutation。

const store = new Vuex.Store({
  state: {
    count: 1
  },
  mutations: {
    increment (state) { //increment爲
      // 變動狀態
      state.count++
    }
  }
})

store.commit('increment'); //喚醒handler

提交載荷

你能夠向store.commit方法中傳入參數，即mutation的載荷。

//...
mutations:  {
    increment (state,n) {
        state.count += n;
    }
}

store.commit("increment",10);

大多數狀況下，載荷應該是一個對象，這樣能夠包含多個字段並且記錄的mutation會更易讀。

//...
mutations: {
    increment (state,payload){
        state.count += payload.amount;
    }
}

store.commit("increment",{amount:10});//mutation是同步事務。任何由increment致使的狀態變動都應該在此刻完成。

所以爲了進行異步操做，我引入了Action。

Action

Action相似Mutation，不一樣在於：1.Action提交的是mutation；mutation是直接變動store.state。2.Action能夠包含任何異步操做。

const store = new Vuex.Store({
  state: {
    count: 0
  },
  mutations: {
    increment (state) {
      state.count++
    }
  },
  actions: {
    increment (context) {
      context.commit('increment')
    }
  }
})

Action函數接受一個與store實例具備相同方法和屬性的context對象。

Module