關於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          # 組合 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'
})

相關引用

• 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