應用結構
實際上，Vuex 在怎麼組織你的程式碼結構上面沒有任何限制，相反，它強制規定了一系列高級的原則：
1、應用級的狀態集中放在 store 中。
2、改變狀態的唯一方式是提交mutations，這是個同步的事務。
3、非同步邏輯應該封裝在action 中。
只要你遵循這些規則，怎麼建構你的專案的結構就取決於你了。如果你的 store 檔案非常大，只要拆分成 action、mutation 和 getter 多個檔案即可。
對於稍微複雜點的應用，我們可能都需要用到模組。以下是一個簡單的專案架構：
├── index.html
├── main.js
├── api
│ └── ... # 這裡發起API 請求
├── components
│ ─ App.vue
│ └── ...
└── store
├── index.js #
├── mutations.js # 根mutations
└── modules
├── cart.js # cart 模組
車實例。
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 創建之後註冊一個模組：
rrrestatere. myModule 暴露為模組的狀態。
其他的 Vue 外掛可以為應用的 store 附加一個模組，然後透過動態註冊就可以使用 Vuex 的狀態管理功能了。例如，vuex-router-sync 函式庫，透過在一個動態註冊的模組中管理應用程式的路由狀態，從而將 vue-router 和 vuex 整合。
你也能用 store.unregisterModule(moduleName) 移除動態註冊過的模組。但是你不能用這個方法移除靜態的模組（也就是在 store 建立的時候宣告的模組）。
Plugins
Vuex 的 store 接收 plugins 選項，這個選項暴露出每個 mutation 的鉤子。一個Vuex 的插件就是一個簡單的方法，接收sotre 作為唯一參數：
store.registerModule('myModule', {
// ...
})
然後像這樣使用：
const myPlugin = store => {
// 当 store 在被初始化完成时被调用
store.subscribe((mutation, state) => {
// mutation 之后被调用
// mutation 的格式为 {type, payload}。
})
}然後像這樣使用：
const store = new Vuex.Store({
// ...
plugins: [myPlugin]
})-像你的元件，它們只能被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]
: []
})reee
插件預設會被起用。為了發布產品，你需要用 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
}
})
日志插件还可以直接通过
