一闪唆、State

Vuex 使用單一狀態(tài)樹崎淳，用一個對象就包含了全部的應(yīng)用層級狀態(tài)涡贱。至此它便作為一個“唯一數(shù)據(jù)源 (SSOT)”而存在咏删。這也意味著，每個應(yīng)用將僅僅包含一個 store 實例问词。單一狀態(tài)樹讓我們能夠直接地定位任一特定的狀態(tài)片段督函，在調(diào)試的過程中也能輕易地取得整個當(dāng)前應(yīng)用狀態(tài)的快照。
Vuex 通過 store 選項，提供了一種機(jī)制將狀態(tài)從根組件“注入”到每一個子組件中（需調(diào)用 Vue.use(Vuex)）辰狡，通過在根實例中注冊 store 選項锋叨，該 store 實例會注入到根組件下的所有子組件中，且子組件能通過 this.$store 訪問到宛篇。

mapState輔助函數(shù)
當(dāng)一個組件需要獲取多個狀態(tài)的時候娃磺，將這些狀態(tài)都聲明為計算屬性會有些重復(fù)和冗余。為了解決這個問題叫倍，我們可以使用 mapState 輔助函數(shù)幫助我們生成計算屬性偷卧，

import { mapState } from 'vuex'

computed: {
  ...mapState({
    // 箭頭函數(shù)可使代碼更簡練
    count: state => state.count,

    // 傳字符串參數(shù) 'count' 等同于 `state => state.count`
    countAlias: 'count',

    // 為了能夠使用 `this` 獲取局部狀態(tài)，必須使用常規(guī)函數(shù)
    countPlusLocalState (state) {
      return state.count + this.localCount
    }
})
}

當(dāng)映射的計算屬性的名稱與 state 的子節(jié)點名稱相同時吆倦，我們也可以給 mapState 傳一個字符串?dāng)?shù)組听诸。

computed: {
  ...mapState([
    'count'
  ])
}

二、Getter

有時候我們需要從 store 中的 state 中派生出一些狀態(tài)蚕泽，例如對列表進(jìn)行過濾并計數(shù)：

computed: {
  doneTodosCount () {
    return this.$store.state.todos.filter(todo => todo.done).length
  }
}

如果有多個組件需要用到此屬性晌梨，我們要么復(fù)制這個函數(shù)，或者抽取到一個共享函數(shù)然后在多處導(dǎo)入它——無論哪種方式都不是很理想须妻。
Vuex 允許我們在 store 中定義“getter”（可以認(rèn)為是 store 的計算屬性）仔蝌。就像計算屬性一樣，getter 的返回值會根據(jù)它的依賴被緩存起來荒吏，且只有當(dāng)它的依賴值發(fā)生了改變才會被重新計算掌逛。
Getter 接受 state 作為其第一個參數(shù)，也可以接受 getters 作為第二個參數(shù)：

getters: {
    doneTodos: state => {
      return state.todos.filter(todo => todo.done)
    }
    doneTodosCount: (state, getters) => {
      return getters.doneTodos.length
    }
  }

通過屬性訪問
Getter 會暴露為 store.getters 對象司倚，你可以以屬性的形式訪問這些值：

store.getters.doneTodos // -> [{ id: 1, text: '...', done: true }]

在組件中使用它：

computed: {
  doneTodosCount () {
    return this.$store.getters.doneTodosCount
  }
}

注意豆混，getter 在通過屬性訪問時是作為 Vue 的響應(yīng)式系統(tǒng)的一部分緩存其中的。

通過方法訪問

getters: {
  // ...
  getTodoById: (state) => (id) => {
    return state.todos.find(todo => todo.id === id)
  }
}

store.getters.getTodoById(2)

mapGetters輔助函數(shù)
mapGetters 輔助函數(shù)僅僅是將 store 中的 getter 映射到局部計算屬性：

import { mapGetters } from 'vuex'

  computed: {
  // 使用對象展開運算符將 getter 混入 computed 對象中
    ...mapGetters([
      'doneTodosCount',
      'anotherGetter'
    ])
  }

如果你想將一個 getter 屬性另取一個名字动知，使用對象形式：

...mapGetters({
  // 把 `this.doneCount` 映射為 `this.$store.getters.doneTodosCount`
  doneCount: 'doneTodosCount'
})

三皿伺、Mutation

更改 Vuex 的 store 中的狀態(tài)的唯一方法是提交 mutation。Vuex 中的 mutation 非常類似于事件：每個 mutation 都有一個字符串的事件類型 (type) 和 一個回調(diào)函數(shù) (handler)盒粮。這個回調(diào)函數(shù)就是我們實際進(jìn)行狀態(tài)更改的地方鸵鸥，并且它會接受 state 作為第一個參數(shù)：

const store = new Vuex.Store({
  state: {
    count: 1
  },
  mutations: {
    increment (state) {
      // 變更狀態(tài)
      state.count++
    }
  }
})

你不能直接調(diào)用一個 mutation handler〉ぶ澹可以以相應(yīng)的 type 調(diào)用 store.commit 方法：
store.commit('increment')

提交載荷（Payload）
你可以向 store.commit 傳入額外的參數(shù)妒穴，即 mutation 的 載荷（payload）：

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

store.commit('increment', 10)

在大多數(shù)情況下，載荷應(yīng)該是一個對象摊崭，這樣可以包含多個字段并且記錄的 mutation 會更易讀讼油。

對象風(fēng)格的提交方式

store.commit({
  type: 'increment',
  amount: 10
})

Mutation 需遵守 Vue 的響應(yīng)規(guī)則
既然 Vuex 的 store 中的狀態(tài)是響應(yīng)式的，那么當(dāng)我們變更狀態(tài)時呢簸，監(jiān)視狀態(tài)的 Vue 組件也會自動更新矮台。這也意味著 Vuex 中的 mutation 也需要與使用 Vue 一樣遵守一些注意事項：

1. 最好提前在你的 store 中初始化好所有所需屬性乏屯。
2. 當(dāng)需要在對象上添加新屬性時，你應(yīng)該 使用 Vue.set(obj, 'newProp', 123) 瘦赫〕皆危或者以新對象替換老對象，例如确虱，利用對象展開運算符：state.obj = { ...state.obj, newProp: 123 }

使用常量替代 Mutation 事件類型
使用常量替代 mutation 事件類型含友，同時把這些常量放在單獨的文件中可以讓你的代碼合作者對整個 app 包含的 mutation 一目了然：

// mutation-types.js
export const SOME_MUTATION = 'SOME_MUTATION'

// store.js
import Vuex from 'vuex'
import { SOME_MUTATION } from './mutation-types'

const store = new Vuex.Store({
  state: { ... },
  mutations: {
    // 我們可以使用 ES2015 風(fēng)格的計算屬性命名功能來使用一個常量作為函數(shù)名
    [SOME_MUTATION] (state) {
      // mutate state
    }
  }
})

Mutation必須是同步函數(shù)
一條重要的原則就是要記住mutation 必須是同步函數(shù)。
因為當(dāng) mutation 觸發(fā)的時候校辩，回調(diào)函數(shù)還沒有被調(diào)用唱较，不知道什么時候回調(diào)函數(shù)實際上被調(diào)用——實質(zhì)上任何在回調(diào)函數(shù)中進(jìn)行的狀態(tài)的改變都是不可追蹤的。所以在 mutation 中混合異步調(diào)用會導(dǎo)致你的程序很難調(diào)試召川。例如南缓，當(dāng)你調(diào)用了兩個包含異步回調(diào)的 mutation 來改變狀態(tài)，你怎么知道什么時候回調(diào)和哪個先回調(diào)呢荧呐？這就是為什么我們要區(qū)分mutation汉形、action這兩個概念。

在組件中提交 Mutation
可以在組件中使用 this.$store.commit('xxx') 提交 mutation倍阐，或者使用 mapMutations 輔助函數(shù)將組件中的 methods 映射為 store.commit 調(diào)用（需要在根節(jié)點注入 store）概疆。

methods: {
    ...mapMutations([
      'increment', // 將 `this.increment()` 映射為 `this.$store.commit('increment')`

      // `mapMutations` 也支持載荷：
      'incrementBy' // 將 `this.incrementBy(amount)` 映射為 `this.$store.commit('incrementBy', amount)`
    ]),
    ...mapMutations({
      add: 'increment' // 將 `this.add()` 映射為 `this.$store.commit('increment')`
    })
  }

四、Action

Action 類似于 mutation峰搪，不同在于：

• Action 提交的是 mutation岔冀，而不是直接變更狀態(tài)。
• Action 可以包含任意異步操作概耻。
  例如：

const store = new Vuex.Store({
  state: {
    count: 0
  },
  mutations: {
    increment (state) {
      state.count++
    }
  },
  actions: {
    increment (context) {
      context.commit('increment')
    }
  }
})
// 可以用參數(shù)結(jié)構(gòu)來簡化代碼
actions: {
  increment ({ commit }) {
    commit('increment')
  }
}

Action 函數(shù)接受一個與 store 實例具有相同方法和屬性的 context 對象使套，因此你可以調(diào)用 context.commit 提交一個 mutation，或者通過 context.state 和 context.getters 來獲取 state 和 getters鞠柄。

分發(fā)Action
Action 通過 store.dispatch 方法觸發(fā)：store.dispatch('increment')侦高。
在 action 內(nèi)部執(zhí)行異步操作：

actions: {
  incrementAsync ({ commit }) {
    setTimeout(() => {
      commit('increment')
    }, 1000)
  }
}

Actions 支持同樣的載荷方式和對象方式進(jìn)行分發(fā)：

// 以載荷形式分發(fā)
store.dispatch('incrementAsync', {
  amount: 10
})

// 以對象形式分發(fā)
store.dispatch({
  type: 'incrementAsync',
  amount: 10
})

在組件中分發(fā) Action
在組件中使用 this.$store.dispatch('xxx') 分發(fā) action，或者使用 mapActions 輔助函數(shù)將組件的 methods 映射為 store.dispatch 調(diào)用（需要先在根節(jié)點注入 store）厌杜。(映射方法同mutation)

組合Action
Action 通常是異步的奉呛，那么如何知道 action 什么時候結(jié)束呢？更重要的是夯尽，我們?nèi)绾尾拍芙M合多個 action瞧壮，以處理更加復(fù)雜的異步流程？
首先匙握，你需要明白 store.dispatch 可以處理被觸發(fā)的 action 的處理函數(shù)返回的 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，我們可以如下組合 action：

// 假設(shè) 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 在不同模塊中可以觸發(fā)多個 action 函數(shù)肺孤。在這種情況下罗晕，只有當(dāng)所有觸發(fā)函數(shù)完成后济欢，返回的 Promise 才會執(zhí)行赠堵。

五小渊、Module

由于使用單一狀態(tài)樹，應(yīng)用的所有狀態(tài)會集中到一個比較大的對象茫叭。當(dāng)應(yīng)用變得非常復(fù)雜時酬屉，store 對象就有可能變得相當(dāng)臃腫。為了解決這個問題揍愁，Vuex 允許我們將 store 分割成模塊（module）呐萨。每個模塊擁有自己的 state、mutation莽囤、action谬擦、getter、甚至是嵌套子模塊——從上至下進(jìn)行同樣方式的分割：

const moduleA = {
  state: { ... },
  mutations: { ... },
  actions: { ... },
  getters: { ... }
}

const moduleB = {
  state: { ... },
  mutations: { ... },
  actions: { ... }
}

const store = new Vuex.Store({
  modules: {
    a: moduleA,
    b: moduleB
  }
})

store.state.a // -> moduleA 的狀態(tài)
store.state.b // -> moduleB 的狀態(tài)

模塊的局部狀態(tài)
對于模塊內(nèi)部的 mutation 和 getter朽缎，接收的第一個參數(shù)是模塊的局部狀態(tài)對象state惨远。同樣，對于模塊內(nèi)部的 action话肖，局部狀態(tài)通過 context.state 暴露出來北秽，根節(jié)點狀態(tài)則為 context.rootState：

const moduleA = {
  // ...
  actions: {
    incrementIfOddOnRootSum ({ state, commit, rootState }) {
      if ((state.count + rootState.count) % 2 === 1) {
        commit('increment')
      }
    }
  }
}

對于模塊內(nèi)部的 getter，根節(jié)點狀態(tài)會作為第三個參數(shù)暴露出來：

const moduleA = {
  // ...
  getters: {
    sumWithRootCount (state, getters, rootState) {
      return state.count + rootState.count
    }
  }
}

命名空間
默認(rèn)情況下，模塊內(nèi)部的 action、mutation 和 getter 是注冊在全局命名空間的——這樣使得多個模塊能夠?qū)ν?mutation 或 action 作出響應(yīng)级野。
如果希望你的模塊具有更高的封裝度和復(fù)用性泄私，你可以通過添加 namespaced: true 的方式使其成為帶命名空間的模塊。當(dāng)模塊被注冊后线定，它的所有 getter、action 及 mutation 都會自動根據(jù)模塊注冊的路徑調(diào)整命名。例如：

const store = new Vuex.Store({
  modules: {
    account: {
      namespaced: true,

      // 模塊內(nèi)容（module assets）
      state: { ... }, // 模塊內(nèi)的狀態(tài)已經(jīng)是嵌套的了虏冻，使用 `namespaced` 屬性不會對其產(chǎn)生影響
      getters: {
        isAdmin () { ... } // -> getters['account/isAdmin']
      },
      actions: {
        login () { ... } // -> dispatch('account/login')
      },
      mutations: {
        login () { ... } // -> commit('account/login')
      },

      // 嵌套模塊
      modules: {
        // 繼承父模塊的命名空間
        myPage: {
          state: { ... },
          getters: {
            profile () { ... } // -> getters['account/profile']
          }
        },

        // 進(jìn)一步嵌套命名空間
        posts: {
          namespaced: true,

          state: { ... },
          getters: {
            popular () { ... } // -> getters['account/posts/popular']
          }
        }
      }
    }
  }
})

在帶命名空間的模塊內(nèi)訪問全局內(nèi)容（Global Assets）
如果你希望使用全局 state 和 getter，rootState 和 rootGetters 會作為第三和第四參數(shù)傳入 getter弹囚，也會通過 context 對象的屬性傳入 action厨相。

在帶命名空間的模塊注冊全局 action
若需要在帶命名空間的模塊注冊全局 action，你可添加 root: true鸥鹉，并將這個 action 的定義放在函數(shù) handler 中蛮穿。

actions: {
  someAction: {
    root: true,
    handler (namespacedContext, payload) { ... } // -> 'someAction'
  }
}

帶命名空間的綁定函數(shù)
當(dāng)使用 mapState, mapGetters, mapActions 和 mapMutations 這些函數(shù)來綁定帶命名空間的模塊時，寫起來可能比較繁瑣：

computed: {
  ...mapState({
    a: state => state.some.nested.module.a,
    b: state => state.some.nested.module.b
  })
},
methods: {
  ...mapActions([
    'some/nested/module/foo', // -> this['some/nested/module/foo']()
    'some/nested/module/bar' // -> this['some/nested/module/bar']()
  ])
}
// 可簡化為
computed: {
  ...mapState('some/nested/module', {
    a: state => state.a,
    b: state => state.b
  })
},
methods: {
  ...mapActions('some/nested/module', [
    'foo', // -> this.foo()
    'bar' // -> this.bar()
  ])
}

或者毁渗，你可以通過使用 createNamespacedHelpers 創(chuàng)建基于某個命名空間輔助函數(shù)践磅。它返回一個對象，對象里有新的綁定在給定命名空間值上的組件綁定輔助函數(shù)：

import { createNamespacedHelpers } from 'vuex'

const { mapState, mapActions } = createNamespacedHelpers('some/nested/module')

export default {
  computed: {
    // 在 `some/nested/module` 中查找
    ...mapState({
      a: state => state.a,
      b: state => state.b
    })
  },
  methods: {
    // 在 `some/nested/module` 中查找
    ...mapActions([
      'foo',
      'bar'
    ])
  }
}

模塊動態(tài)注冊
在 store 創(chuàng)建之后灸异，你可以使用 store.registerModule 方法注冊模塊：

// 注冊模塊 `myModule`
store.registerModule('myModule', {
  // ...
})
// 注冊嵌套模塊 `nested/myModule`
store.registerModule(['nested', 'myModule'], {
  // ...
})

六府适、項目結(jié)構(gòu)

Vuex 并不限制你的代碼結(jié)構(gòu)羔飞。但是，它規(guī)定了一些需要遵守的規(guī)則：

1. 應(yīng)用層級的狀態(tài)應(yīng)該集中到單個 store 對象中檐春。
2. 提交 mutation 是更改狀態(tài)的唯一方法逻淌，并且這個過程是同步的。
3. 異步邏輯都應(yīng)該封裝到 action 里面疟暖。

只要你遵守以上規(guī)則卡儒，如何組織代碼隨你便。如果你的 store 文件太大俐巴，只需將 action骨望、mutation 和 getter 分割到單獨的文件。
對于大型應(yīng)用欣舵，我們會希望把 Vuex 相關(guān)代碼分割到模塊中擎鸠。項目結(jié)構(gòu)示例：

image.png