摘要：每一條被記錄，都需要捕捉到前一狀態(tài)和后一狀態(tài)的快照。在組件中提交你可以在組件中使用提交，或者使用輔助函數(shù)將組件中的映射為調(diào)用需要在根節(jié)點注入。當模塊被注冊后，它的所有及都會自動根據(jù)模塊注冊的路徑調(diào)整命名。

可以認為是store的計算屬性;與計算屬性一樣,getter的返回值會根據(jù)它的依賴緩存起來,且只有當它的依賴值發(fā)生變化才會被重新計算

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

import { mapGetters } from "vuex"

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

更改vuex的store中的狀態(tài)的唯一方法就是提交 mutations
在 mutation 中混合異步調(diào)用會導致你的程序很難調(diào)試。例如，當你能調(diào)用了兩個包含異步回調(diào)的 mutation 來改變狀態(tài)，你怎么知道什么時候回調(diào)和哪個先回調(diào)呢？

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

mutations: {
  someMutation (state) {
    api.callAsyncMethod(() => {
      state.count++
    })
  }
}

現(xiàn)在想象，我們正在 debug 一個 app 并且觀察 devtool 中的 mutation 日志。每一條 mutation 被記錄，devtools 都需要捕捉到前一狀態(tài)和后一狀態(tài)的快照。然而，在上面的例子中 mutation 中的異步函數(shù)中的回調(diào)讓這不可能完成：因為當 mutation 觸發(fā)的時候，回調(diào)函數(shù)還沒有被調(diào)用，devtools 不知道什么時候回調(diào)函數(shù)實際上被調(diào)用——實質(zhì)上任何在回調(diào)函數(shù)中進行的狀態(tài)的改變都是不可追蹤的。

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

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 可以包含任何異步操作

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

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")`
    })
  }
}

Action 通常是異步的，那么如何知道 action 什么時候結(jié)束呢？更重要的是，我們?nèi)绾尾拍芙M合多個 action，以處理更加復雜的異步流程？

首先，你需要明白 store.dispatch 可以處理被觸發(fā)的 action 的處理函數(shù)返回的 Promise，并且 store.dispatch 仍舊返回 Promise：

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

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

由于使用單一狀態(tài)樹,應用的所有狀態(tài)會集中到一個比較大的對象;當應用變得非常復雜時,store 對象就有可能變得相當臃腫。

為了解決以上問題，Vuex 允許我們將 store 分割成模塊（module）。每個模塊擁有自己的 state、mutation、action、getter、甚至是嵌套子模塊——從上至下進行同樣方式的分割：

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)

如果你希望使用全局 state 和 getter，rootState 和 rootGetter 會作為第三和第四參數(shù)傳入 getter，也會通過 context 對象的屬性傳入 action。

默認情況下，模塊內(nèi)部的 action、mutation 和 getter 是注冊在全局命名空間的——這樣使得多個模塊能夠?qū)ν?mutation 或 action 作出響應。

如果希望你的模塊具有更高的封裝度和復用性，你可以通過添加 namespaced: true 的方式使其成為命名空間模塊。當模塊被注冊后，它的所有 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"]
          }
        },

        // 進一步嵌套命名空間
        posts: {
          namespaced: true,

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

如果你希望使用全局 state 和 getter，rootState 和 rootGetter 會作為第三和第四參數(shù)傳入 getter，也會通過 context 對象的屬性傳入 action。
若需要在全局命名空間內(nèi)分發(fā) action 或提交 mutation，將 { root: true } 作為第三參數(shù)傳給 dispatch 或 commit 即可。

要想使模塊內(nèi)的getter, mutation,action注冊在模塊命名空間,必須在模塊內(nèi)加上 namespaced: true

使用命名空間在調(diào)用action時必須使用

this.$store.dispatch("hero1/getHeroInfo");

computed: {
      doneTodosCount () {
          return this.$store.getters["hero1/doneTodos"][0].item;
      }
  },

參考鏈接

解決方案
https://stackoverflow.com/que...