關於Vue.js 2.0的Vuex 2.0 你需要更新的知識庫

應用結構

實際上，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 創建之後註冊一個模組：

rrrestate

re. 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
 }
})

   

日志插件还可以直接通过 3f1c4e4b6b16bbbd69b2ee476dc4f83a 标签, 然后它会提供全局方法 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'
})