vuex

使用場景：

1 多個視圖依賴同一個狀態

2 來自不一樣的視圖的行爲須要變動同一狀態

每個Vuex應用的核心就是store（倉庫），「store」基本上就是一個容器，它包含着你的應用中的大部分的狀態；vuex和單純的全局對象有如下兩點不一樣：

1 Vuex的狀態存儲是響應式的，當Vue組件從store中讀取狀態的時候，若store中的狀態發生變化，那麼相應的組件也會相應地獲得高效更新。

2 你不能直接改變 store 中的狀態。改變 store 中的狀態的惟一途徑就是顯式地提交(commit) mutations。這樣使得咱們能夠方便地跟蹤每個狀態的變化，從而讓咱們可以實現一些工具幫助咱們更好地瞭解咱們的應用。

Vuex 使用 單一狀態樹 —— 是的，用一個對象就包含了所有的應用層級狀態。至此它便做爲一個『惟一數據源(SSOT)』而存在

 

 

mapState 輔助函數

當一個組件須要獲取多個狀態時候，將這些狀態都聲明爲計算屬性會有些重複和冗餘。爲了解決這個問題，咱們可使用 mapState 輔助函數幫助咱們生成計算屬性

Mutations

更改 Vuex 的 store 中的狀態的惟一方法是提交 mutation。Vuex 中的 mutations 很是相似於事件：每一個 mutation 都有一個字符串的 事件類型 (type) 和 一個 回調函數 (handler)。這個回調函數就是咱們實際進行狀態更改的地方，而且它會接受 state 做爲第一個參數

 

你能夠向 store.commit 傳入額外的參數，即 mutation 的 載荷（payload）

mutation 必須是同步函數

在組件中提交 Mutations

你能夠在組件中使用 this.$store.commit('xxx') 提交 mutation，或者使用 mapMutations 輔助函數將組件中的 methods 映射爲 store.commit 調用（須要在根節點注入 store）。

下一步：Actions

在 mutation 中混合異步調用會致使你的程序很難調試。例如，當你能調用了兩個包含異步回調的 mutation 來改變狀態，你怎麼知道何時回調和哪一個先回調呢？這就是爲何咱們要區分這兩個概念。在 Vuex 中，mutation 都是同步事務：

Action 相似於 mutation，不一樣在於：

• Action 提交的是 mutation，而不是直接變動狀態。
• Action 能夠包含任意異步操做。

 

分發 Action

Action 經過 store.dispatch 方法觸發：

store.dispatch('increment')

 

組合 Actions

Action 一般是異步的，那麼如何知道 action 何時結束呢？更重要的是，咱們如何才能組合多個 action，以處理更加複雜的異步流程？

首先，你須要明白 store.dispatch 能夠處理被觸發的action的回調函數返回的Promise，而且store.dispatch仍舊返回Promise：

actions: {
  actionA ({ commit }) {
    return new Promise((resolve, reject) => {
      setTimeout(() => {
        commit('someMutation')
        resolve()
      }, 1000)
    })
  }
}

如今你能夠：

store.dispatch('actionA').then(() => {
  // ...
})

在另一個 action 中也能夠：

actions: {
  // ...
  actionB ({ dispatch, commit }) {
    return dispatch('actionA').then(() => {
      commit('someOtherMutation')
    })
  }
}

最後，若是咱們利用 async / await 這個 JavaScript 即將到來的新特性，咱們能夠像這樣組合 action：

// 假設 getData() 和 getOtherData() 返回的是 Promise

actions: {
  async actionA ({ commit }) {
    commit('gotData', await getData())
  },
  async actionB ({ dispatch, commit }) {
    await dispatch('actionA') // 等待 actionA 完成
    commit('gotOtherData', await getOtherData())
  }
}

一個 store.dispatch 在不一樣模塊中能夠觸發多個 action 函數。在這種狀況下，只有當全部觸發函數完成後，返回的 Promise 纔會執行。

 

Modules

因爲使用單一狀態樹，應用的全部狀態會集中到一個比較大的對象。當應用變得很是複雜時，store 對象就有可能變得至關臃腫。

爲了解決以上問題，Vuex 容許咱們將 store 分割成模塊（module）。每一個模塊擁有本身的 state、mutation、action、getter、甚至是嵌套子模塊——從上至下進行一樣方式的分割