應用結構
實際上，Vuex 在怎么組織你的代碼結構上面沒有任何限制，相反，它強制規定了一系列高級的原則：
-
應用級的狀態集中放在 store 中。
-
改變狀態的唯一方式是提交mutations，這是個同步的事務。
-
異步邏輯應該封裝在action 中。
只要你遵循這些規則，怎么構建你的項目的結構就取決於你了。如果你的 store 文件非常大，僅僅拆分成 action、mutation 和 getter 多個文件即可。
對於稍微復雜點的應用，我們可能都需要用到模塊。下面是一個簡單的項目架構：
├── index.html
├── main.js
├── api
│ └── ... # 這里發起 API 請求
├── components
│ ├── App.vue
│ └── ...
└── store
├── index.js # 組合 modules 、export store
├── actions.js # 根 action
├── mutations.js # 根 mutations
└── modules
├── cart.js # cart 模塊
└── products.js # products 模塊
關於更多，查看 購物車實例。
Modules
由於使用了單一狀態樹，應用的所有狀態都包含在一個大對象內。但是，隨着我們應用規模的不斷增長，這個Store變得非常臃腫。
為了解決這個問題，Vuex 允許我們把 store 分 module（模塊）。每一個模塊包含各自的狀態、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's state
store.state.b // -> moduleB's state
模塊本地狀態
模塊的 mutations 和 getters方法第一個接收參數是模塊的本地狀態。
const moduleA = {
state: { count: 0 },
mutations: {
increment: (state) {
// state 是模塊本地的狀態。
state.count++
}
},
getters: {
doubleCount (state) {
return state.count * 2
}
}
}
相似地，在模塊的 actions 中，context.state 暴露的是本地狀態， context.rootState暴露的才是根狀態。
const moduleA = {
// ...
actions: {
incrementIfOdd ({ state, commit }) {
if (state.count % 2 === 1) {
commit('increment')
}
}
}
}
在模塊的 getters 內，根狀態也會作為第三個參數暴露。
const moduleA = {
// ...
getters: {
sumWithRootCount (state, getters, rootState) {
return state.count + rootState.count
}
}
}
命名空間
要注意，模塊內的 actions、mutations 以及 getters 依然注冊在全局命名空間內 —— 這就會讓多個模塊響應同一種 mutation/action 類型。你可以在模塊的名稱中加入前綴或者后綴來設定命名空間，從而避免命名沖突。如果你的 Vuex 模塊是一個可復用的，執行環境也未知的，那你就應該這么干了。距離，我們想要創建一個 todos 模塊：
// types.js
// 定義 getter、 action 和 mutation 的常量名稱
// 並且在模塊名稱上加上 `todos` 前綴
export const DONE_COUNT = 'todos/DONE_COUNT'
export const FETCH_ALL = 'todos/FETCH_ALL'
export const TOGGLE_DONE = 'todos/TOGGLE_DONE'
// modules/todos.js
import * as types from '../types'
// 用帶前綴的名稱來定義 getters, actions and mutations
const todosModule = {
state: { todos: [] },
getters: {
[types.DONE_COUNT] (state) {
// ...
}
},
actions: {
[types.FETCH_ALL] (context, payload) {
// ...
}
},
mutations: {
[types.TOGGLE_DONE] (state, payload) {
// ...
}
}
}
注冊動態模塊
你可以用 store.registerModule 方法在 store 創建之后注冊一個模塊：
store.registerModule('myModule', {
// ...
})
模塊的 store.state.myModule 暴露為模塊的狀態。
其他的 Vue 插件可以為應用的 store 附加一個模塊，然后通過動態注冊就可以使用 Vuex 的狀態管理功能了。例如，vuex-router-sync 庫，通過在一個動態注冊的模塊中管理應用的路由狀態，從而將 vue-router 和 vuex 集成。
你也能用 store.unregisterModule(moduleName) 移除動態注冊過的模塊。但是你不能用這個方法移除靜態的模塊（也就是在 store 創建的時候聲明的模塊）。
Plugins
Vuex 的 store 接收 plugins 選項，這個選項暴露出每個 mutation 的鈎子。一個 Vuex 的插件就是一個簡單的方法，接收 sotre 作為唯一參數：
const myPlugin = store => {
// 當 store 在被初始化完成時被調用
store.subscribe((mutation, state) => {
// mutation 之后被調用
// mutation 的格式為 {type, payload}。
})
}
然后像這樣使用：
const store = new Vuex.Store({
// ...
plugins: [myPlugin]
})
在插件內提交 Mutations
插件不能直接修改狀態 - 這就像你的組件，它們只能被 mutations 來觸發改變。
通過提交 mutations，插件可以用來同步數據源到 store。例如， 為了同步 websocket 數據源到 store (這只是為說明用法的例子，在實際中，createPlugin 方法會附加更多的可選項，來完成復雜的任務)。
export default function createWebSocketPlugin (socket) {
return store => {
socket.on('data', data => {
store.commit('receiveData', data)
})
store.subscribe(mutation => {
if (mutation.type === 'UPDATE_DATA') {
socket.emit('update', mutation.payload)
}
})
}
}
const plugin = createWebSocketPlugin(socket)
const store = new Vuex.Store({
state,
mutations,
plugins: [plugin]
})
生成狀態快照
有時候插件想獲取狀態 “快照” 和狀態的改變前后的變化。為了實現這些功能，需要對狀態對象進行深拷貝：
const myPluginWithSnapshot = store => {
let prevState = _.cloneDeep(store.state)
store.subscribe((mutation, state) => {
let nextState = _.cloneDeep(state)
// 對比 prevState 和 nextState...
// 保存狀態，用於下一次 mutation
prevState = nextState
})
}
** 生成狀態快照的插件只能在開發階段使用，使用 Webpack 或 Browserify，讓構建工具幫我們處理：
const store = new Vuex.Store({
// ...
plugins: process.env.NODE_ENV !== 'production'
? [myPluginWithSnapshot]
: []
})
插件默認會被起用。為了發布產品，你需要用 Webpack 的 DefinePlugin 或者 Browserify 的 envify 來轉換 process.env.NODE_ENV !== 'production' 的值為 false。
內置 Logger 插件
如果你正在使用 vue-devtools，你可能不需要。
Vuex 帶來一個日志插件用於一般的調試:
import createLogger from 'vuex/dist/logger'
const store = new Vuex.Store({
plugins: [createLogger()]
})
createLogger 方法有幾個配置項：
const logger = createLogger({
collapsed: false, // 自動展開記錄 mutation
transformer (state) {
// 在記錄之前前進行轉換
// 例如，只返回指定的子樹
return state.subTree
},
mutationTransformer (mutation) {
// mutation 格式 { type, payload }
// 我們可以按照想要的方式進行格式化
return mutation.type
}
})
日志插件還可以直接通過 <script> 標簽, 然后它會提供全局方法 createVuexLogger 。
要注意，logger 插件會生成狀態快照，所以僅在開發環境使用。
嚴格模式
要啟用嚴格模式，只需在創建 Vuex store 的時候簡單地傳入 strict: true。
const store = new Vuex.Store({
// ...
strict: true
})
在嚴格模式下，只要 Vuex 狀態在 mutation 方法外被修改就會拋出錯誤。這確保了所有狀態修改都會明確的被調試工具跟蹤。
開發階段 vs. 發布階段
- 不要在發布階段開啟嚴格模式！ 嚴格模式會對狀態樹進行深度監測來檢測不合適的修改 —— 確保在發布階段關閉它避免性能損耗。
跟處理插件的情況類似，我們可以讓構建工具來處理：
const store = new Vuex.Store({
// ...
strict: process.env.NODE_ENV !== 'production'
})