應用結(jié)構(gòu)

實際上，Vuex 在怎么組織你的代碼結(jié)構(gòu)上面沒有任何限制，相反，它強制規(guī)定了一系列高級的原則：

1、應用級的狀態(tài)集中放在 store 中。

2、改變狀態(tài)的唯一方式是提交mutations，這是個同步的事務(wù)。

3、異步邏輯應該封裝在action 中。

只要你遵循這些規(guī)則，怎么構(gòu)建你的項目的結(jié)構(gòu)就取決于你了。如果你的 store 文件非常大，僅僅拆分成 action、mutation 和 getter 多個文件即可。

對于稍微復雜點的應用，我們可能都需要用到模塊。下面是一個簡單的項目架構(gòu)：

├── index.html
├── main.js
├── api
│   └── ... # 這里發(fā)起 API 請求
├── components
│   ├── App.vue
│   └── ...
└── store
    ├── index.js          # 組合 modules 、export store
    ├── actions.js        # 根 action
    ├── mutations.js      # 根 mutations
    └── modules
        ├── cart.js       # cart 模塊
        └── products.js   # products 模塊

關(guān)于更多，查看 購物車實例。

Modules

由于使用了單一狀態(tài)樹，應用的所有狀態(tài)都包含在一個大對象內(nèi)。但是，隨著我們應用規(guī)模的不斷增長，這個Store變得非常臃腫。

為了解決這個問題，Vuex 允許我們把 store 分 module（模塊）。每一個模塊包含各自的狀態(tài)、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 statestore.state.b // -> moduleB's state

模塊本地狀態(tài)

模塊的 mutations 和 getters方法第一個接收參數(shù)是模塊的本地狀態(tài)。

const moduleA = { state: { count: 0 }, mutations: { increment: (state) {  // state 是模塊本地的狀態(tài)。  state.count++ } }, getters: { doubleCount (state) {  return state.count * 2 } }}

相似地，在模塊的 actions 中，context.state 暴露的是本地狀態(tài)， context.rootState暴露的才是根狀態(tài)。

const moduleA = { // ... actions: { incrementIfOdd ({ state, commit }) {  if (state.count % 2 === 1) {  commit('increment')  } } }}

在模塊的 getters 內(nèi)，根狀態(tài)也會作為第三個參數(shù)暴露。

const moduleA = { // ... getters: { sumWithRootCount (state, getters, rootState) {  return state.count + rootState.count } }}

命名空間

要注意，模塊內(nèi)的 actions、mutations 以及 getters 依然注冊在全局命名空間內(nèi) ―― 這就會讓多個模塊響應同一種 mutation/action 類型。你可以在模塊的名稱中加入前綴或者后綴來設(shè)定命名空間，從而避免命名沖突。如果你的 Vuex 模塊是一個可復用的，執(zhí)行環(huán)境也未知的，那你就應該這么干了。距離，我們想要創(chuàng)建一個 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.jsimport * 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) {  // ... } }}

注冊動態(tài)模塊

你可以用 store.registerModule 方法在 store 創(chuàng)建之后注冊一個模塊：

store.registerModule('myModule', { // ...})

模塊的 store.state.myModule 暴露為模塊的狀態(tài)。

其他的 Vue 插件可以為應用的 store 附加一個模塊，然后通過動態(tài)注冊就可以使用 Vuex 的狀態(tài)管理功能了。例如，vuex-router-sync 庫，通過在一個動態(tài)注冊的模塊中管理應用的路由狀態(tài)，從而將 vue-router 和 vuex 集成。

你也能用 store.unregisterModule(moduleName) 移除動態(tài)注冊過的模塊。但是你不能用這個方法移除靜態(tài)的模塊（也就是在 store 創(chuàng)建的時候聲明的模塊）。

Plugins

Vuex 的 store 接收 plugins 選項，這個選項暴露出每個 mutation 的鉤子。一個 Vuex 的插件就是一個簡單的方法，接收 sotre 作為唯一參數(shù)：

const myPlugin = store => { // 當 store 在被初始化完成時被調(diào)用 store.subscribe((mutation, state) => { // mutation 之后被調(diào)用 // mutation 的格式為 {type, payload}。 })}

然后像這樣使用：

const store = new Vuex.Store({ // ... plugins: [myPlugin]})

在插件內(nèi)提交 Mutations

插件不能直接修改狀態(tài) - 這就像你的組件，它們只能被 mutations 來觸發(fā)改變。

通過提交 mutations，插件可以用來同步數(shù)據(jù)源到 store。例如， 為了同步 websocket 數(shù)據(jù)源到 store (這只是為說明用法的例子，在實際中，createPlugin 方法會附加更多的可選項，來完成復雜的任務(wù))。

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

生成狀態(tài)快照

有時候插件想獲取狀態(tài) “快照” 和狀態(tài)的改變前后的變化。為了實現(xiàn)這些功能，需要對狀態(tài)對象進行深拷貝：

const myPluginWithSnapshot = store => { let prevState = _.cloneDeep(store.state) store.subscribe((mutation, state) => { let nextState = _.cloneDeep(state) // 對比 prevState 和 nextState... // 保存狀態(tài)，用于下一次 mutation prevState = nextState })}

** 生成狀態(tài)快照的插件只能在開發(fā)階段使用，使用 Webpack 或 Browserify，讓構(gòu)建工具幫我們處理：

const store = new Vuex.Store({ // ... plugins: process.env.NODE_ENV !== 'production' ? [myPluginWithSnapshot] : []})

插件默認會被起用。為了發(fā)布產(chǎn)品，你需要用 Webpack 的 DefinePlugin 或者 Browserify 的 envify 來轉(zhuǎn)換 process.env.NODE_ENV !== 'production' 的值為 false。

內(nèi)置 Logger 插件

如果你正在使用 vue-devtools，你可能不需要。

Vuex 帶來一個日志插件用于一般的調(diào)試:

import createLogger from 'vuex/dist/logger'const store = new Vuex.Store({ plugins: [createLogger()]})

createLogger 方法有幾個配置項：

const logger = createLogger({ collapsed: false, // 自動展開記錄 mutation transformer (state) { // 在記錄之前前進行轉(zhuǎn)換 // 例如，只返回指定的子樹 return state.subTree }, mutationTransformer (mutation) { // mutation 格式 { type, payload } // 我們可以按照想要的方式進行格式化 return mutation.type }})

日志插件還可以直接通過 <script> 標簽, 然后它會提供全局方法 createVuexLogger 。

要注意，logger 插件會生成狀態(tài)快照，所以僅在開發(fā)環(huán)境使用。

嚴格模式

要啟用嚴格模式，只需在創(chuàng)建 Vuex store 的時候簡單地傳入 strict: true。

const store = new Vuex.Store({ // ... strict: true})

在嚴格模式下，只要 Vuex 狀態(tài)在 mutation 方法外被修改就會拋出錯誤。這確保了所有狀態(tài)修改都會明確的被調(diào)試工具跟蹤。

開發(fā)階段 vs. 發(fā)布階段

不要在發(fā)布階段開啟嚴格模式！ 嚴格模式會對狀態(tài)樹進行深度監(jiān)測來檢測不合適的修改 ―― 確保在發(fā)布階段關(guān)閉它避免性能損耗。
跟處理插件的情況類似，我們可以讓構(gòu)建工具來處理：

const store = new Vuex.Store({ // ... strict: process.env.NODE_ENV !== 'production'})

相關(guān)引用

http://vuex.vuejs.org/en/plugins.html
http://vuex.vuejs.org/en/strict.html
http://vuex.vuejs.org/en/modules.html
http://vuex.vuejs.org/en/structure.html

以上就是本文的全部內(nèi)容，希望對大家的學習有所幫助，也希望大家多多支持武林網(wǎng)。