摘要：原文出自本人博客的詳細總結博主博客兼乎說在前面最近在使用做項目，所以有了總結的念頭。在這種情況下，只有當所有觸發函數完成后，返回的才會執行。當模塊被注冊后，它的所有及都會自動根據模塊注冊的路徑調整命名。

原文出自本人博客：
vuex的詳細總結
博主博客--兼乎

最近在使用vuex做項目，所以有了總結vuex的念頭。于是在本天中午到晚上9點，我一直沒有停過，為了能盡快將vuex的重點寫出來。雖然本vuex文檔還不夠完整但暫時夠用，最大缺點是沒有寫實戰，只是總結了每個知識的的要點。回想一下，時間過得很多，new Boy() 之后時間更加緊迫，有時候分心乏術。到現在，使用vue也有一段時間了。老是想總結點有關vue的卻老是在寫一些vue相關的demo，從而沒有了總結的時間。今天總結下定決定寫點vue相關的，一方面鞏固基數，一方面分享總結，同時本編偏理論和一些細節，后面一部分因為官方文檔也挺實用的就直接摘抄Vuex官方文檔。

另外貼上一段戳心的雞湯，請喝：
我們的敵人不是我們身外的黑暗，而是自己內心的黑暗，那就是我們的容易失望，我們的沮喪，我們的缺乏信心，耐心和細心，我們缺乏堅韌，輕言放棄，乃至自暴自棄。

不懂的要上官網看文檔，不懂的看一次兩次直到弄懂為止。

vue是一個前端javascript寫的漸進式框架，在組件化模塊的時候主要無非是渲染數據、增強交互效果、拓展業務邏輯組件、組件分離要高內聚低耦合、分配管理路由，在這之后就是一個掛在在瀏覽器端的全局js模塊。當然這是我的片面之詞，詳情請移步vue。

可以這么通俗理解：vuex是一個掛載到vue的全局變量對象（store），而且store的 屬性（state） 的 改變 只 能通過提交mutation來改變，使用Getter來映射store對象狀態。另外 提交 同步事務 使用 mutation 的 commit， 分發 異步事務 使用 action 的 dispatch。同時使用 module 來方便管理 vuex模塊 和 狀態

Vuex官方文檔:https://vuex.vuejs.org/zh-cn/intro.html

前方高能

狀態管理模式，核心是一個store（倉庫），包含 共享的 單一狀態（state）樹

1、一個 全局單例 模式管理，方便集中管理所有組件狀態
2、狀態管理 是 響應式 的，且高效
3、改變狀態（state）的 唯一途徑 是 顯示提交commit（mutation）
4、mutation->動作

1、因為狀態儲存是響應式，所以 讀取狀態的方法 最簡單的方法是使用 計算屬性（computed），但建議使用輔助函數獲取狀態

2、Action 類似于 mutation，不同在于：

Action 提交的是 mutation，而不是直接變更狀態。
（
    同步情況：Action -> 提交 mutation  ；  Mutation -> 提交 commit
    異步情況：Action -> 使用dispatch出發異步
）
Action 可以包含任意異步操作，而mutation 是同步事務。
（Action -> 異步  ；  Mutation -> 同步）

3、使用action分發異步事務時：

一個?store.dispatch?在不同模塊中可以觸發多個 action 函數。
在這種情況下，只有當所有觸發函數完成后，返回的 Promise 才會執行。

使用輔助函數：
獲取狀態：mapState

當映射的計算屬性的名稱與 state 的子節點名稱相同時，使用數組傳入

如：mapState（[
        "count"
    ]）
不然 傳 對象
如：mapState({
        count: state => state.count,
        countAlias: "count"   //這里 "count" 等價于上述 state => state.count
    })

對象展開運算符（…）:

使用對象展開運算符將此對象 混入 到 外部對象 中
…mapState（{   }）

接受參數

參數可以有state和getter本身

如：const store = new Vuex.store({
        state: {
            todos: [
                {id: 1, text: "id1", done: true},
                {id: 2, text: "id2", done: false}
            ]
        },
        getters: {
            doneTodos: state => {
                //這里過來state中todos的done為true的對象，并暴露為store.getters對象
                //store.getters.doneTodos // -> [{ id: 1, text: "...", done: true }]
                return state.todos.filter( todo => todo.done)
            },
            todoCount: (state, getter) => {
                return getters.doneTodos.length  // -> 1
            }
        }
    })

使用輔助函數：

僅僅是將 store 中的 getter  映射 到 局部 計算屬性：mapGetters
例子：看上文

對象展開運算符（…）:

使用對象展開運算符將 getter 混入 computed 對象中

如：computed: {
        ...mapGetters([
          "doneTodosCount",
          "anotherGetter",
          // ...
        ])
      }
    

                        類似于事件（Event）：每個 mutation 都有一個 字符串 的 事件類型 (type) 
                        和 一個 回調函數 (handler,改變狀態的地方)

接受參數

參數可以有多個。第一參數為state，
                及其他對象或屬性（支持提交負荷Payload）

如：const store = new Vuex.Store({
      state: {
        count: 1
      },
      mutations: {
        increment (state, n) {
          state.count += n
        }
      }
    })
觸發事件：提交一次commit
store.commit("increment", 10)

在組件中提交 Mutation

兩種方法：
    1.使用 this.$store.commit("xxx") （支持載荷PayLoad）
    2.使用 mapMutations 輔助函數 （支持載荷PayLoad）
        將組件中的 methods 映射為 store.commit 調用（需要在根節點注入 store）

        如：
        // xxx.vue組件
        import { mapMutations } from "vuex"
        export default {
          // ...
          methods: {
            ...mapMutations([
              "increment", 
            // 將 `this.increment()` 映射為 `this.$store.commit("increment")`
              "incrementBy" 
            // 將 `this.incrementBy(amount)` 映射為 `this.$store.commit("incrementBy", amount)`
            ]),
            ...mapMutations({
              add: "increment" 
            // 將 `this.add()` 映射為 `this.$store.commit("increment")`
            })
          }
        }
        

Mutation 需遵守 Vue 的響應規則

使用 常量 替代 Mutation 事件類型( 推薦 )

這是一種規范，而且這樣既能使用 eslint 的檢測工具，也能讓開發者一目了然

如：
//mutation-types.js
export default {
    const SOME_MUTATION = " SOME_MUTATION "
}

//store.js
import Vuex from "vuex"
import * as types from "mutation-types"

const store = Vuex.store({
    state: { … },
    mutations: {
        [ SOME_MUTATION ]( state ) => {
            …
        }
    }
})

Mutation 必須是同步函數（ 重點 ）

為了實現state實時跟蹤，使用同步函數，也為了調試方便

                         而且 是 提交 mutation 上的事件

接受參數

參數可以有多個。第一參數為接受一個與 store 實例具有相同方法和屬性的 context 對象（因此你可以調用 context.commit 提交一個 mutation，或者通過 context.state 和 context.getters 來獲取 state 和 getter），
                及其他對象或屬性（支持提交負荷Payload）

如：
const store = new Vuex.Store({
  state: {
    count: 0
  },
  mutations: {
    increment (state, n) {
      state.count += n
    }
  },
  actions: {
    incrementAsyn(context, n) {
        context.commit( "increment", n )
    }
  }
//或者使用參數結構
//actions: {
//  increment( { commit } ) {
//     commit( "increment", n )
//   }
  //  }

})

分發Action

因為Action提交的commit實際是提交mutation，而mutation的提交必須是同步的，
要向提交異步的action必須使用dispatch

如：
const store = new Vuex.Store({
  state: {
    count: 0
  },
  mutations: {
    increment (state, amount) {
      state.count += amount
    }
  },
  actions: {
    incrementAsyn( { commit } ) {
        setTimeout( () => {
            commit( "increment" )
        }, 1000)
    }
   }
});

// 以載荷形式分發
store.dispatch( "incrementAsyn", {
    amount: 10
} )

// 以對象形式分發
store.dispatch( {
    type: "incrementAsyn", 
    amount: 10
} )

例子2：
來看一個更加實際的購物車示例，涉及到調用異步 API 和分發多重 mutation：

actions: {
  checkout ({ commit, state }, products) {
    // 把當前購物車的物品備份起來
    const savedCartItems = [...state.cart.added]
    // 發出結賬請求，然后樂觀地清空購物車
    commit(types.CHECKOUT_REQUEST)
    // 購物 API 接受一個成功回調和一個失敗回調
    shop.buyProducts(
      products,
      // 成功操作
      () => commit(types.CHECKOUT_SUCCESS),
      // 失敗操作
      () => commit(types.CHECKOUT_FAILURE, savedCartItems)
    )
  }
}

在組件中 分發 Action
兩種方法：
1.使用 this.$store.dispatch("xxx") （支持載荷PayLoad）
2.使用 mapActions 輔助函數 （支持載荷PayLoad）

將組件中的 methods 映射為 store.commit 調用（需要在根節點注入 store）

如：
// xxx.vue組件
import { mapActions } from "vuex"
export default {
  // ...
  methods: {
   ...mapActions([
      "increment", 
    // 將 `this.increment()` 映射為 `this.$store.dispatch("increment")`
      "incrementBy" 
    // 將 `this.incrementBy(amount)` 映射為 `this.$store.dispatch("incrementBy", amount)`
    ]),
    ...mapActions({
      add: "increment" 
    // 將 `this.add()` 映射為 `this.$store.dispatch("increment")`
    })
  }
}

組合Action

那么既然使用actions來 異步 分發改變狀態，
因此也要使用到 Promise ，
和 asyn/await 的新知識的

使用 Promise
actions: {
    actionA( {commit} ){
        return new Promise( (resolve, reject) => {
            setTimeout( () => {
                commit("someMutation")
                resolve()
            }, 1000)
        })
    },
    actionB( {dispatch, commit} ){
        return dispatch("actionA).then( () => {
            commit("someOtherMutation")
        })
    }
},
// xxx.vue組件
methods： {
this.$store.dispatch("actionA").then(() => {
    …
})
}


使用  asyn/await 
//假設 getData() 和 getOtherData() 返回的是 Promise

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

注意：
一個?store.dispatch?在不同模塊中可以觸發多個 action 函數。
在這種情況下，只有當所有觸發函數完成后，返回的 Promise 才會執行。

由于使用單一狀態樹，應用的所有狀態會集中到一個比較大的對象。當應用變得非常復雜時，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 的狀態
store.state.b // -> moduleB 的狀態

模塊的局部狀態
    對于模塊內部的 mutation 和 getter，接收的第一個參數是模塊的局部狀態對象。

    如：
    const moduleA = {
      state: { count: 0 },
      mutations: {
        increment (state) {
          // 這里的 `state` 對象是模塊的局部狀態
          state.count++
        }
      },
      getters: {
        doubleCount (state) {
          return state.count * 2
        }
      }
    }
    
    同樣，對于模塊內部的 action，局部狀態通過 context.state 暴露出來，
    根節點狀態則為 context.rootState：
    如：
    const moduleA = {
      // ...
      actions: {
        incrementIfOddOnRootSum ({ state, commit, rootState }) {
          if ((state.count + rootState.count) % 2 === 1) {
            commit("increment")
          }
        }
      }
    }
    對于模塊內部的 getter，根節點狀態會作為第三個參數暴露出來：
    如:
    const moduleA = {
      // ...
      getters: {
        sumWithRootCount (state, getters, rootState) {
          return state.count + rootState.count
        }
      }
    }
    
命名空間
    默認情況下，module中的{ state， actions, getters } 注冊 在 全局變量上， 
    使得多個模塊能夠對同一 mutation 或 action 作出響應。
    
    如果希望 模塊具有更高的封裝度和復用性，可以通過 添加  namespaced: true  的方式使其成為命名空間模塊。
    當模塊被注冊后，它的所有 getter、action 及 mutation 都會自動根據模塊注冊的路徑調整命名。例如：

    如：
    const store = new Vuex.Store({
      modules: {
        account: {
          namespaced: true,
    
          // 模塊內容（module assets）
          state: { ... }, // 模塊內的狀態已經是嵌套的了，使用 `namespaced` 屬性不會對其產生影響
          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"]
              }
            }
          }
        }
      }
    })
    啟用了命名空間的 getter 和 action 會收到局部化的 getter，dispatch 和 commit。換言之，你在使用模塊內容（module assets）時不需要在同一模塊內額外添加空間名前綴。更改 namespaced 屬性后不需要修改模塊內的代碼。
    
在命名空間模塊內訪問全局內容（Global Assets）
    如果希望 使用全局  state  和 getter，rootState 和 rootGetter 會作為第三和第四參數傳入 getter，也會通過 context 對象的屬性傳入 action。

    {
        命名模塊（module）內 使用 全局 state 和 getter
        在命名模塊（module）的getterr 傳入 rootState 和 rootGetter
    }
    若需要在全局命名空間內分發 action 或提交 mutation，將 { root: true } 作為第三參數傳給 dispatch 或 commit 即可。
    {
        全局命名空間 內 分發 action 或 提交 mutation
        則在 action 或 mutation 內
          dispatch("someOtherAction", null, { root: true }) // -> "someOtherAction"
          dispatch("someOtherAction", null, { root: true }) // -> "someOtherAction"
    }

    如：
    modules: {
      foo: {
        namespaced: true,
    
        getters: {
          // 在這個模塊的 getter 中，`getters` 被局部化了
          // 你可以使用 getter 的第四個參數來調用 `rootGetters`
          someGetter (state, getters, rootState, rootGetters) {
            getters.someOtherGetter // -> "foo/someOtherGetter"
            rootGetters.someOtherGetter // -> "someOtherGetter"
          },
          someOtherGetter: state => { ... }
        },
    
        actions: {
          // 在這個模塊中， dispatch 和 commit 也被局部化了
          // 他們可以接受 `root` 屬性以訪問根 dispatch 或 commit
          someAction ({ dispatch, commit, getters, rootGetters }) {
            getters.someGetter // -> "foo/someGetter"
            rootGetters.someGetter // -> "someGetter"
    
            dispatch("someOtherAction") // -> "foo/someOtherAction"
            dispatch("someOtherAction", null, { root: true }) // -> "someOtherAction"
    
            commit("someMutation") // -> "foo/someMutation"
            commit("someMutation", null, { root: true }) // -> "someMutation"
          },
          someOtherAction (ctx, payload) { ... }
        }
      }
    }

帶命名空間的綁定函數

當使用 mapState, mapGetters, mapActions 和 mapMutations 這些函數來綁定命名空間模塊時，寫起來可能比較繁瑣：
如：
computed: {
  ...mapState({
    a: state => state.some.nested.module.a,
    b: state => state.some.nested.module.b
  })
},
methods: {
  ...mapActions([
    "some/nested/module/foo",
    "some/nested/module/bar"
  ])
}
解決方法：
1、對于這種情況，可以將模塊的空間名稱字符串作為第一個參數傳遞給上述函數，這樣所有綁定都會自動將該模塊作為上下文。于是上面的例子可以簡化為：

computed: {
  ...mapState("some/nested/module", {
    a: state => state.a,
    b: state => state.b
  })
},
methods: {
  ...mapActions("some/nested/module", [
    "foo",
    "bar"
  ])
}
2、通過使用 createNamespacedHelpers 創建基于某個命名空間輔助函數。它返回一個對象，對象里有新的綁定在給定命名空間值上的組件綁定輔助函數：

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

給插件開發者的注意事項

如果開發的插件（Plugin）提供了模塊并允許用戶將其添加到 Vuex store，可能需要考慮模塊的空間名稱問題。對于這種情況，你可以通過插件的參數對象來允許用戶指定空間名稱：

如：
// 通過插件的參數對象得到空間名稱
// 然后返回 Vuex 插件函數
export function createPlugin (options = {}) {
  return function (store) {
    // 把空間名字添加到插件模塊的類型（type）中去
    const namespace = options.namespace || ""
    store.dispatch(namespace + "pluginAction")
  }
}

模塊動態注冊

在 store 創建之后，你可以使用 store.registerModule 方法注冊模塊：

如：
// 注冊模塊 `myModule`
store.registerModule("myModule", {
  // ...
})
// 注冊嵌套模塊 `nested/myModule`
store.registerModule(["nested", "myModule"], {
  // ...
})
之后就可以通過 store.state.myModule 和 store.state.nested.myModule 訪問模塊的狀態。

模塊動態注冊功能使得其他 Vue 插件可以通過在 store 中附加新模塊的方式來使用 Vuex 管理狀態。例如，vuex-router-sync 插件就是通過動態注冊模塊將 vue-router 和 vuex 結合在一起，實現應用的路由狀態管理。

你也可以使用 store.unregisterModule(moduleName) 來動態卸載模塊。注意，你不能使用此方法卸載靜態模塊（即創建 store 時聲明的模塊）。

在注冊一個新 module 時，你很有可能想保留過去的 state，例如從一個服務端渲染的應用保留 state。你可以通過 preserveState 選項將其歸檔：store.registerModule("a", module, { preserveState: true })。

模塊重用
有時我們可能需要創建一個模塊的多個實例，例如：

創建多個 store，他們公用同一個模塊 (例如當 runInNewContext 選項是 false 或 "once" 時，為了在服務端渲染中避免有狀態的單例)
在一個 store 中多次注冊同一個模塊
如果我們使用一個純對象來聲明模塊的狀態，那么這個狀態對象會通過引用被共享，導致狀態對象被修改時 store 或模塊間數據互相污染的問題。

實際上這和 Vue 組件內的 data 是同樣的問題。因此解決辦法也是相同的——使用一個函數來聲明模塊狀態（僅 2.3.0+ 支持）：

如：
const MyReusableModule = {
  state () {
    return {
      foo: "bar"
    }
  },
  // mutation, action 和 getter 等等...
}

Vuex 并不限制你的代碼結構。但是，它規定了一些需要遵守的規則：

1. 應用層級的狀態應該集中到單個 store 對象中。
2. 提交?mutation?是更改狀態的唯一方法，并且這個過程是同步的。
3. 異步邏輯都應該封裝到?action?里面。

只要你遵守以上規則，如何組織代碼隨你便。如果你的 store 文件太大，只需將 action、mutation 和 getter 分割到多帶帶的文件。
對于大型應用，我們會希望把 Vuex 相關代碼分割到模塊中。下面是項目結構示例：

├── index.html
├── main.js
├── api
│   └── ... # 抽取出API請求
├── components
│   ├── App.vue
│   └── ...
└── store
    ├── index.js          # 我們組裝模塊并導出 store 的地方
    ├── actions.js        # 根級別的 action
    ├── mutations.js      # 根級別的 mutation
    └── modules
        ├── cart.js       # 購物車模塊
        └── products.js   # 產品模塊