摘要：管理統(tǒng)一組件狀態(tài)。映射到組件將映射為也支持載荷將映射為將映射為概念允許我們將分割成模塊。每個(gè)模塊擁有自己的類似里面的針對(duì)每個(gè)組件對(duì)應(yīng)的狀態(tài)做處理的狀態(tài)的狀態(tài)對(duì)于模塊內(nèi)部的，局部狀態(tài)通過暴露出來，根節(jié)點(diǎn)狀態(tài)則為。

管理統(tǒng)一組件狀態(tài)state。每個(gè)應(yīng)用將僅僅包含一個(gè) store 實(shí)例。單一狀態(tài)樹讓我們能夠直接地定位任一特定的狀態(tài)片段，在調(diào)試的過程中也能輕易地取得整個(gè)當(dāng)前應(yīng)用狀態(tài)的快照。

state =>mapState

getters =>mapGetters

actions =>mapActions

mutations => mapMutations

moudle

Vuex 通過 store 選項(xiàng)，提供了一種機(jī)制將狀態(tài)從根組件“注入”到每一個(gè)子組件中（需調(diào)用 Vue.use(Vuex)）：

const app = new Vue({
  el: "#app",
  // 把 store 對(duì)象提供給 “store” 選項(xiàng)，這可以把 store 的實(shí)例注入所有的子組件
  store,
  components: { Counter },
  template: `
    

      
    
  `
})

通過在根實(shí)例中注冊(cè) store 選項(xiàng)，該 store 實(shí)例會(huì)注入到根組件下的所有子組件中，且子組件能通過 this.$store 訪問到。
當(dāng)我們需要時(shí)刻跟蹤狀態(tài)值的變化時(shí)，可以通過組件的計(jì)算機(jī)屬性來確定，然后使用mapState.方法來映射。

computed: {
  localComputed () { /* ... */ },
  // 使用對(duì)象展開運(yùn)算符將此對(duì)象混入到外部對(duì)象中
  ...mapState({
    // ...
  })
}

Vuex 允許我們?cè)?store 中定義“getter”（可以認(rèn)為是 store 的計(jì)算屬性）。就像計(jì)算屬性一樣，getter 的返回值會(huì)根據(jù)它的依賴被緩存起來，且只有當(dāng)它的依賴值發(fā)生了改變才會(huì)被重新計(jì)算。

Getter 接受 state 作為第一個(gè)參數(shù)

mapGetters 輔助函數(shù)僅僅是將 store 中的 getter

import { mapGetters } from "vuex"
export default {
  computed: {
  // 使用對(duì)象展開運(yùn)算符將 getter 混入 computed 對(duì)象中
    ...mapGetters([
      "doneTodosCount",
      "anotherGetter",
      // ...
    ])
  }
}

更改 Vuex 的 store 中的狀態(tài)的唯一方法是提交 mutation，調(diào)用方法store.commit("increment")

注意點(diǎn)

使用常量替代 Mutation 事件類型

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)格的計(jì)算屬性命名功能來使用一個(gè)常量作為函數(shù)名
    [SOME_MUTATION] (state) {
      // mutate state
    }
  }
})

Mutation 必須是同步函數(shù)

mapMutations

   import { mapMutations } from "vuex"
   export default {
 // ...
 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 提交的是 mutation，而不是直接變更狀態(tài)。

Action 可以包含任意異步操作。

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

actions: {
 increment ({ commit }) {
   commit("increment")
 }
}

mapActions 映射到組件

import { mapActions } from "vuex"

export default {
  // ...
  methods: {
    ...mapActions([
      "increment", // 將 `this.increment()` 映射為 `this.$store.dispatch("increment")`

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

概念
  Vuex 允許我們將 store 分割成模塊（module）。每個(gè)模塊擁有自己的 state、mutation、action、getter.類似redux里面的reducer 針對(duì)每個(gè)組件對(duì)應(yīng)的state狀態(tài)做處理

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)

rootState

對(duì)于模塊內(nèi)部的 action，局部狀態(tài)通過 context.state 暴露出來，根節(jié)點(diǎn)狀態(tài)則為 context.rootState。
rootState 可以獲取到所有mudule里面的state值

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

這個(gè)還是要多看官方的demo