Vue狀態管理vuex

前面的話

　　因爲多個狀態分散的跨越在許多組件和交互間各個角落，大型應用複雜度也常常逐漸增加。爲了解決這個問題，Vue提供了vuex。本文將詳細介紹Vue狀態管理vuex

 

引入

　　當訪問數據對象時，一個 Vue 實例只是簡單的代理訪問。因此，若是有一處須要被多個實例間共享的狀態，能夠簡單地經過維護一份數據來實現共享

const sourceOfTruth = {}
const vmA = new Vue({ data: sourceOfTruth }) const vmB = new Vue({ data: sourceOfTruth })

　　如今當 sourceOfTruth 發生變化，vmA 和 vmB 都將自動的更新引用它們的視圖。子組件們的每一個實例也會經過 this.$root.$data 去訪問。如今有了惟一的實際來源，可是，調試將會變爲噩夢。任什麼時候間，應用中的任何部分，在任何數據改變後，都不會留下變動過的記錄。

　　爲了解決這個問題，採用一個簡單的 store 模式：

var store = {
  debug: true, state: { message: 'Hello!' }, setMessageAction (newValue) { if (this.debug) console.log('setMessageAction triggered with', newValue) this.state.message = newValue }, clearMessageAction () { if (this.debug) console.log('clearMessageAction triggered') this.state.message = '' } }

　　全部 store 中 state 的改變，都放置在 store 自身的 action 中去管理。這種集中式狀態管理可以被更容易地理解哪一種類型的 mutation 將會發生，以及它們是如何被觸發。當錯誤出現時，如今也會有一個 log 記錄 bug 以前發生了什麼

　　此外，每一個實例/組件仍然能夠擁有和管理本身的私有狀態：

var vmA = new Vue({
  data: {
    privateState: {},
    sharedState: store.state
  }
})
var vmB = new Vue({ data: { privateState: {}, sharedState: store.state } })

　　[注意]不該該在action中替換原始的狀態對象，組件和store須要引用同一個共享對象，mutation纔可以被觀察

　　接着繼續延伸約定，組件不容許直接修改屬於 store 實例的 state，而應執行 action 來分發 (dispatch) 事件通知 store 去改變，最終達成了 Flux 架構。這樣約定的好處是，可以記錄全部 store 中發生的 state 改變，同時實現能作到記錄變動 (mutation)、保存狀態快照、歷史回滾/時光旅行的先進的調試工具

 

概述

　　Vuex 是一個專爲 Vue.js 應用程序開發的狀態管理模式。它採用集中式存儲管理應用的全部組件的狀態，並以相應的規則保證狀態以一種可預測的方式發生變化。Vuex提供了諸如零配置的 time-travel 調試、狀態快照導入導出等高級調試功能

【狀態管理模式】

　　下面以一個簡單的計數應用爲例，來講明狀態管理模式

new Vue({
  el: '#app',
  // state
  data () {
    return {
      count: 0
    }
  },
  // view
  template: `
  <div>
    <span>{{count}}</span>
    <input type="button" value="+" @click="increment">
  </div>
  `,
  // actions
  methods: {
    increment () {
      this.count++
    }
  }
})

　　這個狀態自管理應用包含如下幾個部分：

state，驅動應用的數據源；
view，以聲明方式將 state 映射到視圖；
actions，響應在 view 上的用戶輸入致使的狀態變化。

　　下面是一個表示「單向數據流」理念的極簡示意：

　　可是，當應用遇到多個組件共享狀態時，單向數據流的簡潔性很容易被破壞，存在如下兩個問題

　　一、多個視圖依賴於同一狀態

　　二、來自不一樣視圖的行爲須要變動同一狀態

　　對於問題一，傳參的方法對於多層嵌套的組件將會很是繁瑣，而且對於兄弟組件間的狀態傳遞無能爲力。對於問題二，常常會採用父子組件直接引用或者經過事件來變動和同步狀態的多份拷貝。以上的這些模式很是脆弱，一般會致使沒法維護的代碼。

　　所以，爲何不把組件的共享狀態抽取出來，以一個全局單例模式管理呢？在這種模式下，組件樹構成了一個巨大的「視圖」，無論在樹的哪一個位置，任何組件都能獲取狀態或者觸發行爲

　　另外，經過定義和隔離狀態管理中的各類概念並強制遵照必定的規則，代碼將會變得更結構化且易維護。

　　這就是 Vuex 背後的基本思想，借鑑了 Flux、Redux、和 The Elm Architecture。與其餘模式不一樣的是，Vuex 是專門爲 Vue.js 設計的狀態管理庫，以利用 Vue.js 的細粒度數據響應機制來進行高效的狀態更新

【使用狀況】

　　雖然 Vuex 能夠幫助管理共享狀態，但也附帶了更多的概念和框架。這須要對短時間和長期效益進行權衡。

　　若是不打算開發大型單頁應用，使用 Vuex 多是繁瑣冗餘的。確實是如此——若是應用夠簡單，最好不要使用 Vuex。一個簡單的 global event bus 就足夠所需了。可是，若是須要構建是一箇中大型單頁應用，極可能會考慮如何更好地在組件外部管理狀態，Vuex 將會成爲天然而然的選擇

 

開始

【安裝】

npm install vuex --save

　　在一個模塊化的打包系統中，必須顯式地經過 Vue.use() 來安裝 Vuex

import Vue from 'vue'
import Vuex from 'vuex'

Vue.use(Vuex)

　　當使用全局 script 標籤引用 Vuex 時，不須要以上安裝過程

【概述】

　　每個 Vuex 應用的核心就是 store（倉庫）。「store」基本上就是一個容器，它包含着應用中大部分的狀態 (state)。Vuex 和單純的全局對象有如下兩點不一樣：

　　一、Vuex 的狀態存儲是響應式的。當 Vue 組件從 store 中讀取狀態的時候，若 store 中的狀態發生變化，那麼相應的組件也會相應地獲得高效更新

　　二、不能直接改變 store 中的狀態。改變 store 中的狀態的惟一途徑就是顯式地提交 (commit) mutation。這樣使得能夠方便地跟蹤每個狀態的變化，從而可以實現一些工具幫助更好地瞭解應用

【最簡單的store】

　　下面來建立一個 store。建立過程直截了當——僅須要提供一個初始 state 對象和一些 mutation

// 若是在模塊化構建系統中，請確保在開頭調用了 Vue.use(Vuex)
const store = new Vuex.Store({
  state: {
    count: 0
  },
  mutations: {
    increment (state) {
      state.count++
    }
  }
})

　　如今，能夠經過 store.state 來獲取狀態對象，以及經過 store.commit 方法觸發狀態變動：

store.commit('increment')
console.log(store.state.count) // -> 1

　　經過提交 mutation 的方式，而非直接改變 store.state.count，是由於想要更明確地追蹤到狀態的變化。這個簡單的約定可以讓意圖更加明顯，這樣在閱讀代碼的時候能更容易地解讀應用內部的狀態改變。此外，這樣也有機會去實現一些能記錄每次狀態改變，保存狀態快照的調試工具。有了它，甚至能夠實現如時間穿梭般的調試體驗。

　　因爲 store 中的狀態是響應式的，在組件中調用 store 中的狀態簡單到僅須要在計算屬性中返回便可。觸發變化也僅僅是在組件的 methods 中提交 mutation

　　下面是一個使用vuex實現的簡單計數器

const store = new Vuex.Store({
  state: {
    count: 0
  },
  mutations: {
    increment: state => state.count++,
    decrement: state => state.count--,
  }
})
new Vue({
  el: '#app',
  computed: {
    count () {
      return store.state.count
    }
  },
  // view
  template: `
  <div>
    <input type="button" value="-" @click="decrement">
    <span>{{count}}</span>
    <input type="button" value="+" @click="increment">
  </div>
  `,
  // actions
  methods: {
    increment () {
      store.commit('increment')
    },
    decrement () {
      store.commit('decrement')
    },    
  }
})

 

核心概念

state

【單一狀態樹】

　　Vuex 使用單一狀態樹——用一個對象就包含了所有的應用層級狀態。至此它便做爲一個「惟一數據源 (SSOT)」而存在。這也意味着，每一個應用將僅僅包含一個 store 實例。單一狀態樹可以直接地定位任一特定的狀態片斷，在調試的過程當中也能輕易地取得整個當前應用狀態的快照

【在VUE組件中得到VUEX狀態】

　　如何在 Vue 組件中展現狀態呢？因爲 Vuex 的狀態存儲是響應式的，從 store 實例中讀取狀態最簡單的方法就是在計算屬性中返回某個狀態

// 建立一個 Counter 組件
const Counter = {
  template: `<div>{{ count }}</div>`,
  computed: {
    count () {
      return store.state.count
    }
  }
}

　　每當 store.state.count 變化的時候, 都會從新求取計算屬性，而且觸發更新相關聯的 DOM

　　然而，這種模式致使組件依賴全局狀態單例。在模塊化的構建系統中，在每一個須要使用 state 的組件中須要頻繁地導入，而且在測試組件時須要模擬狀態。

　　Vuex 經過 store 選項，提供了一種機制將狀態從根組件「注入」到每個子組件中（需調用 Vue.use(Vuex)）：

const app = new Vue({
  el: '#app',
  // 把 store 對象提供給 「store」 選項，這能夠把 store 的實例注入全部的子組件
  store,
  components: { Counter },
  template: `
    <div class="app">
      <counter></counter>
    </div>
  `
})

　　經過在根實例中註冊 store 選項，該 store 實例會注入到根組件下的全部子組件中，且子組件能經過this.$store訪問到。下面來更新下 Counter 的實現：

const Counter = {
  template: `<div>{{ count }}</div>`,
  computed: {
    count () {
      return this.$store.state.count
    }
  }
}

【mapState輔助函數】

　　當一個組件須要獲取多個狀態時，將這些狀態都聲明爲計算屬性會有些重複和冗餘。爲了解決這個問題，可使用mapState輔助函數幫助生成計算屬性

// 在單獨構建的版本中輔助函數爲 Vuex.mapState
import { mapState } from 'vuex'

export default {
  // ...
  computed: mapState({
    // 箭頭函數可以使代碼更簡練
    count: state => state.count,

    // 傳字符串參數 'count' 等同於 `state => state.count`
    countAlias: 'count',

    // 爲了可以使用 `this` 獲取局部狀態，必須使用常規函數
    countPlusLocalState (state) {
      return state.count + this.localCount
    }
  })
}

　　當映射的計算屬性的名稱與 state 的子節點名稱相同時，也能夠給 mapState 傳一個字符串數組

computed: mapState([
  // 映射 this.count 爲 store.state.count
  'count'
])

【對象展開運算符】

　　mapState 函數返回的是一個對象。如何將它與局部計算屬性混合使用呢？一般，須要使用一個工具函數將多個對象合併爲一個，將最終對象傳給 computed 屬性。可是自從有了對象展開運算符，能夠極大地簡化寫法：

computed: {
  localComputed () { /* ... */ },
  // 使用對象展開運算符將此對象混入到外部對象中
  ...mapState({
    // ...
  })
}

【組件仍然保有局部狀態】

　　使用 Vuex 並不意味着須要將全部的狀態放入 Vuex。雖然將全部的狀態放到 Vuex 會使狀態變化更顯式和易調試，但也會使代碼變得冗長和不直觀。若是有些狀態嚴格屬於單個組件，最好仍是做爲組件的局部狀態

 

Getter

　　有時候須要從 store 中的 state 中派生出一些狀態，例如對列表進行過濾並計數：

computed: {
  doneTodosCount () {
    return this.$store.state.todos.filter(todo => todo.done).length
  }
}

　　若是有多個組件須要用到此屬性，要麼複製這個函數，或者抽取到一個共享函數而後在多處導入它——不管哪一種方式都不是很理想

　　Vuex 容許在 store 中定義「getter」（能夠認爲是 store 的計算屬性）。就像計算屬性同樣，getter 的返回值會根據它的依賴被緩存起來，且只有當它的依賴值發生了改變纔會被從新計算

　　Getter 接受 state 做爲其第一個參數：

const store = new Vuex.Store({
  state: {
    todos: [
      { id: 1, text: '...', done: true },
      { id: 2, text: '...', done: false }
    ]
  },
  getters: {
    doneTodos: state => {
      return state.todos.filter(todo => todo.done)
    }
  }
})

　　Getter 會暴露爲 store.getters 對象：

store.getters.doneTodos // -> [{ id: 1, text: '...', done: true }]

　　Getter 也能夠接受其餘 getter 做爲第二個參數：

getters: {
  // ...
  doneTodosCount: (state, getters) => {
    return getters.doneTodos.length
  }
}
store.getters.doneTodosCount // -> 1

　　能夠很容易地在任何組件中使用它：

computed: {
  doneTodosCount () {
    return this.$store.getters.doneTodosCount
  }
}

　　也能夠經過讓 getter 返回一個函數，來實現給 getter 傳參。在對 store 裏的數組進行查詢時很是有用

getters: {
  // ...
  getTodoById: (state, getters) => (id) => {
    return state.todos.find(todo => todo.id === id)
  }
}
store.getters.getTodoById(2) // -> { id: 2, text: '...', done: false }

　　若是箭頭函數很差理解，翻譯成普通函數以下

var getTodoById = function(state,getters){
  return function(id){
    return state.todos.find(function(todo){
      return todo.id === id
    })
  }
}
store.getters.getTodoById(2) // -> { id: 2, text: '...', done: false }

【mapGetters輔助函數】

　　mapGetters 輔助函數僅僅是將 store 中的 getter 映射到局部計算屬性：

import { mapGetters } from 'vuex'

export default {
  // ...
  computed: {
  // 使用對象展開運算符將 getter 混入 computed 對象中
    ...mapGetters([
      'doneTodosCount',
      'anotherGetter',
      // ...
    ])
  }
}

　　若是想將一個 getter 屬性另取一個名字，使用對象形式：

mapGetters({
  // 映射 `this.doneCount` 爲 `store.getters.doneTodosCount`
  doneCount: 'doneTodosCount'
})

 

mutation

　　更改 Vuex 的 store 中的狀態的惟一方法是提交 mutation。Vuex 中的 mutation 很是相似於事件：每一個 mutation 都有一個字符串的 事件類型 (type) 和 一個 回調函數 (handler)。這個回調函數就是實際進行狀態更改的地方，而且它會接受 state 做爲第一個參數：

const store = new Vuex.Store({
  state: {
    count: 1
  },
  mutations: {
    increment (state) {
      // 變動狀態
      state.count++
    }
  }
})

　　不能直接調用一個 mutation handler。這個選項更像是事件註冊：「當觸發一個類型爲 increment 的 mutation 時，調用此函數。」要喚醒一個 mutation handler，須要以相應的 type 調用 store.commit 方法：

store.commit('increment')

【提交載荷(Payload)】

　　能夠向 store.commit 傳入額外的參數，即 mutation 的 載荷（payload）

// ...
mutations: {
  increment (state, n) {
    state.count += n
  }
}
store.commit('increment', 10)

　　在大多數狀況下，載荷應該是一個對象，這樣能夠包含多個字段而且記錄的 mutation 會更易讀：

// ...
mutations: {
  increment (state, payload) {
    state.count += payload.amount
  }
}
store.commit('increment', {
  amount: 10
})

【對象風格的提交方式】

　　提交 mutation 的另外一種方式是直接使用包含 type 屬性的對象

store.commit({
  type: 'increment',
  amount: 10
})

　　當使用對象風格的提交方式，整個對象都做爲載荷傳給 mutation 函數，所以 handler 保持不變：

mutations: {
  increment (state, payload) {
    state.count += payload.amount
  }
}

【遵照響應規則】

　　既然 Vuex 的 store 中的狀態是響應式的，那麼當變動狀態時，監視狀態的 Vue 組件也會自動更新。這也意味着 Vuex 中的 mutation 也須要與使用 Vue 同樣遵照一些注意事項：

　　一、最好提早在store中初始化好全部所需屬性

　　二、當須要在對象上添加新屬性時，應該使用 Vue.set(obj, 'newProp', 123), 或者以新對象替換老對象

　　例如，利用對象展開運算符能夠這樣寫：

state.obj = { ...state.obj, newProp: 123 }

【使用常量替代Mutation事件類型】

　　使用常量替代 mutation 事件類型在各類 Flux 實現中是很常見的模式。這樣可使 linter 之類的工具發揮做用，同時把這些常量放在單獨的文件中可讓代碼合做者對整個 app 包含的 mutation 一目瞭然

// mutation-types.js
export const SOME_MUTATION = 'SOME_MUTATION'
// store.js
import Vuex from 'vuex'
import { SOME_MUTATION } from './mutation-types'

const store = new Vuex.Store({
  state: { ... },
  mutations: {
    // 可使用 ES2015 風格的計算屬性命名功能來使用一個常量做爲函數名
    [SOME_MUTATION] (state) {
      // mutate state
    }
  }
})

【Mutation必須是同步函數】

　　一條重要的原則就是mutation必須是同步函數

mutations: {
  someMutation (state) {
    api.callAsyncMethod(() => {
      state.count++
    })
  }
}

　　假如正在debug 一個 app 而且觀察 devtool 中的 mutation 日誌。每一條 mutation 被記錄，devtools 都須要捕捉到前一狀態和後一狀態的快照。然而，在上面的例子中 mutation 中的異步函數中的回調讓這不可能完成：由於當 mutation 觸發的時候，回調函數尚未被調用，devtools 不知道何時回調函數實際上被調用——實質上任何在回調函數中進行的狀態改變都是不可追蹤的

【在組件中提交Mutation】

　　能夠在組件中使用 this.$store.commit('xxx') 提交 mutation，或者使用 mapMutations 輔助函數將組件中的 methods 映射爲 store.commit 調用（須要在根節點注入 store）

import { mapMutations } from 'vuex'

export default {
  // ...
  methods: {
    ...mapMutations([
      'increment', // 將 `this.increment()` 映射爲 `this.$store.commit('increment')`

      // `mapMutations` 也支持載荷：
      'incrementBy' // 將 `this.incrementBy(amount)` 映射爲 `this.$store.commit('incrementBy', amount)`
    ]),
    ...mapMutations({
      add: 'increment' // 將 `this.add()` 映射爲 `this.$store.commit('increment')`
    })
  }
}

 

action

　　在 mutation 中混合異步調用會致使程序很難調試。例如，當能調用了兩個包含異步回調的 mutation 來改變狀態，怎麼知道何時回調和哪一個先回調呢？這就是爲何要區分這兩個概念。在 Vuex 中，mutation 都是同步事務：

store.commit('increment')
// 任何由 "increment" 致使的狀態變動都應該在此刻完成。

　　Action相似於mutation，不一樣之處在於：

　　一、Action 提交的是 mutation，而不是直接變動狀態

　　二、Action 能夠包含任意異步操做

　　下面來註冊一個簡單的action

const store = new Vuex.Store({
  state: {
    count: 0
  },
  mutations: {
    increment (state) {
      state.count++
    }
  },
  actions: {
    increment (context) {
      context.commit('increment')
    }
  }
})

　　Action 函數接受一個與 store 實例具備相同方法和屬性的 context 對象，所以能夠調用 context.commit 提交一個 mutation，或者經過 context.state 和 context.getters 來獲取 state 和 getters

　　實踐中，會常常用到 ES2015 的 參數解構 來簡化代碼（特別是須要調用 commit 不少次的時候）

actions: {
  increment ({ commit }) {
    commit('increment')
  }
}

【分發Action】

　　Action 經過 store.dispatch 方法觸發

store.dispatch('increment')

　　乍一眼看上去感受畫蛇添足，直接分發 mutation 豈不更方便？實際上並不是如此，mutation必須同步執行這個限制，而Action 就不受約束，能夠在 action 內部執行異步操做

actions: {
  incrementAsync ({ commit }) {
    setTimeout(() => {
      commit('increment')
    }, 1000)
  }
}

　　Actions 支持一樣的載荷方式和對象方式進行分發

// 以載荷形式分發
store.dispatch('incrementAsync', {
  amount: 10
})

// 以對象形式分發
store.dispatch({
  type: 'incrementAsync',
  amount: 10
})

　　來看一個更加實際的購物車示例，涉及到調用異步 API 和分發多重 mutation：

actions: {
  checkout ({ commit, state }, products) {
    // 把當前購物車的物品備份起來
    const savedCartItems = [...state.cart.added]
    // 發出結帳請求，而後樂觀地清空購物車
    commit(types.CHECKOUT_REQUEST)
    // 購物 API 接受一個成功回調和一個失敗回調
    shop.buyProducts(
      products,
      // 成功操做
      () => commit(types.CHECKOUT_SUCCESS),
      // 失敗操做
      () => commit(types.CHECKOUT_FAILURE, savedCartItems)
    )
  }
}

　　注意正在進行一系列的異步操做，而且經過提交 mutation 來記錄 action 產生的反作用（即狀態變動）

【在組件中分發Action】

　　在組件中使用 this.$store.dispatch('xxx') 分發 action，或者使用 mapActions 輔助函數將組件的 methods 映射爲 store.dispatch 調用（須要先在根節點注入 store）：

import { mapActions } from 'vuex'

export default {
  // ...
  methods: {
    ...mapActions([
      'increment', // 將 `this.increment()` 映射爲 `this.$store.dispatch('increment')`

      // `mapActions` 也支持載荷：
      'incrementBy' // 將 `this.incrementBy(amount)` 映射爲 `this.$store.dispatch('incrementBy', amount)`
    ]),
    ...mapActions({
      add: 'increment' // 將 `this.add()` 映射爲 `this.$store.dispatch('increment')`
    })
  }
}

【組合Action】

　　Action 一般是異步的，那麼如何知道 action 何時結束呢？更重要的是，如何才能組合多個 action，以處理更加複雜的異步流程？

　　首先，須要明白 store.dispatch 能夠處理被觸發的 action 的處理函數返回的 Promise，而且 store.dispatch 仍舊返回 Promise：

actions: {
  actionA ({ commit }) {
    return new Promise((resolve, reject) => {
      setTimeout(() => {
        commit('someMutation')
        resolve()
      }, 1000)
    })
  }
}

　　如今能夠

store.dispatch('actionA').then(() => {
  // ...
})

　　在另一個 action 中也能夠：

actions: {
  // ...
  actionB ({ dispatch, commit }) {
    return dispatch('actionA').then(() => {
      commit('someOtherMutation')
    })
  }
}

　　最後，若是利用 async / await 這個 JavaScript 新特性，能夠像這樣組合 action：

// 假設 getData() 和 getOtherData() 返回的是 Promise

actions: {
  async actionA ({ commit }) {
    commit('gotData', await getData())
  },
  async actionB ({ dispatch, commit }) {
    await dispatch('actionA') // 等待 actionA 完成
    commit('gotOtherData', await getOtherData())
  }
}

　　一個 store.dispatch 在不一樣模塊中能夠觸發多個 action 函數。在這種狀況下，只有當全部觸發函數完成後，返回的 Promise 纔會執行

 

module

　　因爲使用單一狀態樹，應用的全部狀態會集中到一個比較大的對象。當應用變得很是複雜時，store 對象就有可能變得至關臃腫。

　　爲了解決以上問題，Vuex 容許將 store 分割成模塊（module）。每一個模塊擁有本身的 state、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 的狀態
store.state.b // -> moduleB 的狀態

【模塊的局部狀態】

　　對於模塊內部的 mutation 和 getter，接收的第一個參數是模塊的局部狀態對象

const moduleA = {
  state: { count: 0 },
  mutations: {
    increment (state) {
      // 這裏的 `state` 對象是模塊的局部狀態
      state.count++
    }
  },

  getters: {
    doubleCount (state) {
      return state.count * 2
    }
  }
}

　　一樣，對於模塊內部的 action，局部狀態經過 context.state 暴露出來，根節點狀態則爲 context.rootState：

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

　　對於模塊內部的 getter，根節點狀態會做爲第三個參數暴露出來：

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

【命名空間】

　　默認狀況下，模塊內部的 action、mutation 和 getter 是註冊在全局命名空間的——這樣使得多個模塊可以對同一 mutation 或 action 做出響應

　　若是但願模塊具備更高的封裝度和複用性，能夠經過添加 namespaced: true 的方式使其成爲命名空間模塊。當模塊被註冊後，它的全部 getter、action 及 mutation 都會自動根據模塊註冊的路徑調整命名。例如：

const store = new Vuex.Store({
  modules: {
    account: {
      namespaced: true,
      // 模塊內容（module assets）
      state: { ... }, // 模塊內的狀態已是嵌套的了，使用 `namespaced` 屬性不會對其產生影響
      getters: {
        isAdmin () { ... } // -> getters['account/isAdmin']
      },
      actions: {
        login () { ... } // -> dispatch('account/login')
      },
      mutations: {
        login () { ... } // -> commit('account/login')
      },
      // 嵌套模塊
      modules: {
        // 繼承父模塊的命名空間
        myPage: {
          state: { ... },
          getters: {
            profile () { ... } // -> getters['account/profile']
          }
        },

        // 進一步嵌套命名空間
        posts: {
          namespaced: true,

          state: { ... },
          getters: {
            popular () { ... } // -> getters['account/posts/popular']
          }
        }
      }
    }
  }
})

　　啓用了命名空間的 getter 和 action 會收到局部化的 getter，dispatch 和 commit。換言之，在使用模塊內容（module assets）時不須要在同一模塊內額外添加空間名前綴。更改 namespaced 屬性後不須要修改模塊內的代碼

【在命名空間模塊內訪問全局內容（Global Assets）】

　　若是但願使用全局 state 和 getter，rootState 和 rootGetter 會做爲第三和第四參數傳入 getter，也會經過 context 對象的屬性傳入 action

　　若須要在全局命名空間內分發 action 或提交 mutation，將 { root: true } 做爲第三參數傳給 dispatch 或 commit便可

modules: {
  foo: {
    namespaced: true,
    getters: {
      // 在這個模塊的 getter 中，`getters` 被局部化了
      // 你可使用 getter 的第四個參數來調用 `rootGetters`
      someGetter (state, getters, rootState, rootGetters) {
        getters.someOtherGetter // -> 'foo/someOtherGetter'
        rootGetters.someOtherGetter // -> 'someOtherGetter'
      },
      someOtherGetter: state => { ... }
    },

    actions: {
      // 在這個模塊中， dispatch 和 commit 也被局部化了
      // 他們能夠接受 `root` 屬性以訪問根 dispatch 或 commit
      someAction ({ dispatch, commit, getters, rootGetters }) {
        getters.someGetter // -> 'foo/someGetter'
        rootGetters.someGetter // -> 'someGetter'

        dispatch('someOtherAction') // -> 'foo/someOtherAction'
        dispatch('someOtherAction', null, { root: true }) // -> 'someOtherAction'

        commit('someMutation') // -> 'foo/someMutation'
        commit('someMutation', null, { root: true }) // -> 'someMutation'
      },
      someOtherAction (ctx, payload) { ... }
    }
  }
}

【帶命名空間的綁定函數】

　　當使用 mapState, mapGetters, mapActions 和 mapMutations 這些函數來綁定命名空間模塊時，寫起來可能比較繁瑣

computed: {
  ...mapState({
    a: state => state.some.nested.module.a,
    b: state => state.some.nested.module.b
  })
},
methods: {
  ...mapActions([
    'some/nested/module/foo',
    'some/nested/module/bar'
  ])
}

　　對於這種狀況，能夠將模塊的空間名稱字符串做爲第一個參數傳遞給上述函數，這樣全部綁定都會自動將該模塊做爲上下文。因而上面的例子能夠簡化爲

computed: {
  ...mapState('some/nested/module', {
    a: state => state.a,
    b: state => state.b
  })
},
methods: {
  ...mapActions('some/nested/module', [
    'foo',
    'bar'
  ])
}

　　並且，能夠經過使用 createNamespacedHelpers 建立基於某個命名空間輔助函數。它返回一個對象，對象裏有新的綁定在給定命名空間值上的組件綁定輔助函數：

import { createNamespacedHelpers } from 'vuex'

const { mapState, mapActions } = createNamespacedHelpers('some/nested/module')

export default {
  computed: {
    // 在 `some/nested/module` 中查找
    ...mapState({
      a: state => state.a,
      b: state => state.b
    })
  },
  methods: {
    // 在 `some/nested/module` 中查找
    ...mapActions([
      'foo',
      'bar'
    ])
  }
}

【注意事項】

　　若是開發的插件（Plugin）提供了模塊並容許用戶將其添加到 Vuex store，可能須要考慮模塊的空間名稱問題。對於這種狀況，能夠經過插件的參數對象來容許用戶指定空間名稱：

// 經過插件的參數對象獲得空間名稱
// 而後返回 Vuex 插件函數
export function createPlugin (options = {}) {
  return function (store) {
    // 把空間名字添加到插件模塊的類型（type）中去
    const namespace = options.namespace || ''
    store.dispatch(namespace + 'pluginAction')
  }
}

【模塊動態註冊】

　　在 store 建立以後，可使用 store.registerModule 方法註冊模塊：

// 註冊模塊 `myModule`
store.registerModule('myModule', {
  // ...
})
// 註冊嵌套模塊 `nested/myModule`
store.registerModule(['nested', 'myModule'], {
  // ...
})

　　以後就能夠經過 store.state.myModule 和 store.state.nested.myModule 訪問模塊的狀態。

　　模塊動態註冊功能使得其餘 Vue 插件能夠經過在 store 中附加新模塊的方式來使用 Vuex 管理狀態。例如，vuex-router-sync 插件就是經過動態註冊模塊將 vue-router 和 vuex 結合在一塊兒，實現應用的路由狀態管理。

　　也可使用 store.unregisterModule(moduleName) 來動態卸載模塊。注意，不能使用此方法卸載靜態模塊（即建立 store 時聲明的模塊）

【模塊重用】

　　有時可能須要建立一個模塊的多個實例，例如：

　　一、建立多個 store，他們公用同一個模塊 (例如當 runInNewContext 選項是 false 或 'once' 時，爲了在服務端渲染中避免有狀態的單例)

　　二、在一個 store 中屢次註冊同一個模塊

　　若是使用一個純對象來聲明模塊的狀態，那麼這個狀態對象會經過引用被共享，致使狀態對象被修改時 store 或模塊間數據互相污染的問題。

　　實際上這和 Vue 組件內的 data 是一樣的問題。所以解決辦法也是相同的——使用一個函數來聲明模塊狀態（僅 2.3.0+ 支持）：

const MyReusableModule = {
  state () {
    return {
      foo: 'bar'
    }
  },
  // mutation, action 和 getter 等等...
}

 

項目結構

　　Vuex 並不限制代碼結構。可是，它規定了一些須要遵照的規則：

　　一、應用層級的狀態應該集中到單個 store 對象中

　　二、提交 mutation 是更改狀態的惟一方法，而且這個過程是同步的

　　三、異步邏輯都應該封裝到 action 裏面

　　只要遵照以上規則，能夠隨意組織代碼。若是store文件太大，只需將 action、mutation 和 getter 分割到單獨的文件

　　對於大型應用，但願把 Vuex 相關代碼分割到模塊中。下面是項目結構示例：

├── index.html
├── main.js
├── api
│   └── ... # 抽取出API請求
├── components
│   ├── App.vue
│   └── ...
└── store
    ├── index.js          # 組裝模塊並導出 store 的地方
    ├── actions.js        # 根級別的 action
    ├── mutations.js      # 根級別的 mutation
    └── modules
        ├── cart.js       # 購物車模塊
        └── products.js   # 產品模塊

 

插件

　　Vuex 的 store 接受 plugins 選項，這個選項暴露出每次 mutation 的鉤子。Vuex 插件就是一個函數，它接收 store 做爲惟一參數：

const myPlugin = store => {
  // 當 store 初始化後調用
  store.subscribe((mutation, state) => {
    // 每次 mutation 以後調用
    // mutation 的格式爲 { type, payload }
  })
}

　　而後像這樣使用：

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

【在插件中提交Mutation】

　　在插件中不容許直接修改狀態——相似於組件，只能經過提交 mutation 來觸發變化。

　　經過提交 mutation，插件能夠用來同步數據源到 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]
})

【生成State快照】

　　有時候插件須要得到狀態的「快照」，比較改變的先後狀態。想要實現這項功能，須要對狀態對象進行深拷貝：

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插件】

　　Vuex 自帶一個日誌插件用於通常的調試:

import createLogger from 'vuex/dist/logger'

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

　　createLogger 函數有幾個配置項：

const logger = createLogger({
  collapsed: false, // 自動展開記錄的 mutation
  filter (mutation, stateBefore, stateAfter) {
    // 若 mutation 須要被記錄，就讓它返回 true 便可
    // 順便，`mutation` 是個 { type, payload } 對象
    return mutation.type !== "aBlacklistedMutation"
  },
  transformer (state) {
    // 在開始記錄以前轉換狀態
    // 例如，只返回指定的子樹
    return state.subTree
  },
  mutationTransformer (mutation) {
    // mutation 按照 { type, payload } 格式記錄
    // 咱們能夠按任意方式格式化
    return mutation.type
  }
})

　　日誌插件還能夠直接經過 <script> 標籤引入，它會提供全局方法 createVuexLogger。

　　要注意，logger 插件會生成狀態快照，因此僅在開發環境使用

 

嚴格模式

　　開啓嚴格模式，僅需在建立 store 的時候傳入 strict: true

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

　　在嚴格模式下，不管什麼時候發生了狀態變動且不是由 mutation 函數引發的，將會拋出錯誤。這能保證全部的狀態變動都能被調試工具跟蹤到

【開發環境與發佈環境】

　　不要在發佈環境下啓用嚴格模式！嚴格模式會深度監測狀態樹來檢測不合規的狀態變動——請確保在發佈環境下關閉嚴格模式，以免性能損失。

　　相似於插件，可讓構建工具來處理這種狀況：

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

 

表單處理

　　當在嚴格模式中使用 Vuex 時，在屬於 Vuex 的 state 上使用 v-model 會比較棘手：

<input v-model="obj.message">

　　假設這裏的 obj 是在計算屬性中返回的一個屬於 Vuex store 的對象，在用戶輸入時，v-model 會試圖直接修改 obj.message。在嚴格模式中，因爲這個修改不是在 mutation 函數中執行的, 這裏會拋出一個錯誤。

　　用「Vuex 的思惟」去解決這個問題的方法是：給 <input> 中綁定 value，而後偵聽 input 或者 change 事件，在事件回調中調用 action:

<input :value="message" @input="updateMessage">
// ...
computed: {
  ...mapState({
    message: state => state.obj.message
  })
},
methods: {
  updateMessage (e) {
    this.$store.commit('updateMessage', e.target.value)
  }
}

　　下面是 mutation 函數：

// ...
mutations: {
  updateMessage (state, message) {
    state.obj.message = message
  }
}

【雙向綁定的計算屬性】

　　必須認可，這樣作比簡單地使用「v-model + 局部狀態」要囉嗦得多，而且也損失了一些 v-model 中頗有用的特性。另外一個方法是使用帶有 setter 的雙向綁定計算屬性：

<input v-model="message">
// ...
computed: {
  message: {
    get () {
      return this.$store.state.obj.message
    },
    set (value) {
      this.$store.commit('updateMessage', value)
    }
  }
}

 

測試

【測試Mutation】

　　Mutation 很容易被測試，由於它們僅僅是一些徹底依賴參數的函數。這裏有一個小技巧，若是在 store.js 文件中定義了 mutation，而且使用 ES2015 模塊功能默認輸出了 Vuex.Store 的實例，那麼仍然能夠給 mutation 取個變量名而後把它輸出去：

const state = { ... }

// `mutations` 做爲命名輸出對象
export const mutations = { ... }

export default new Vuex.Store({
  state,
  mutations
})

　　下面是用 Mocha + Chai 測試一個 mutation 的例子

// mutations.js
export const mutations = {
  increment: state => state.count++
}
// mutations.spec.js
import { expect } from 'chai'
import { mutations } from './store'

// 解構 `mutations`
const { increment } = mutations

describe('mutations', () => {
  it('INCREMENT', () => {
    // 模擬狀態
    const state = { count: 0 }
    // 應用 mutation
    increment(state)
    // 斷言結果
    expect(state.count).to.equal(1)
  })
})

【測試Action】

　　Action 應對起來略微棘手，由於它們可能須要調用外部的 API。當測試 action 的時候，須要增長一個 mocking 服務層——例如，能夠把 API 調用抽象成服務，而後在測試文件中用 mock 服務迴應 API 調用。爲了便於解決 mock 依賴，能夠用 webpack 和 inject-loader 打包測試文件。

　　下面是一個測試異步 action 的例子：

// actions.js
import shop from '../api/shop'

export const getAllProducts = ({ commit }) => {
  commit('REQUEST_PRODUCTS')
  shop.getProducts(products => {
    commit('RECEIVE_PRODUCTS', products)
  })
}
// actions.spec.js

// 使用 require 語法處理內聯 loaders。
// inject-loader 返回一個容許咱們注入 mock 依賴的模塊工廠
import { expect } from 'chai'
const actionsInjector = require('inject-loader!./actions')

// 使用 mocks 建立模塊
const actions = actionsInjector({
  '../api/shop': {
    getProducts (cb) {
      setTimeout(() => {
        cb([ /* mocked response */ ])
      }, 100)
    }
  }
})

// 用指定的 mutaions 測試 action 的輔助函數
const testAction = (action, args, state, expectedMutations, done) => {
  let count = 0

  // 模擬提交
  const commit = (type, payload) => {
    const mutation = expectedMutations[count]

    try {
      expect(mutation.type).to.equal(type)
      if (payload) {
        expect(mutation.payload).to.deep.equal(payload)
      }
    } catch (error) {
      done(error)
    }

    count++
    if (count >= expectedMutations.length) {
      done()
    }
  }

  // 用模擬的 store 和參數調用 action
  action({ commit, state }, ...args)

  // 檢查是否沒有 mutation 被 dispatch
  if (expectedMutations.length === 0) {
    expect(count).to.equal(0)
    done()
  }
}

describe('actions', () => {
  it('getAllProducts', done => {
    testAction(actions.getAllProducts, [], {}, [
      { type: 'REQUEST_PRODUCTS' },
      { type: 'RECEIVE_PRODUCTS', payload: { /* mocked response */ } }
    ], done)
  })
})

【測試Getter】

　　若是getter 包含很複雜的計算過程，頗有必要測試它們。Getter 的測試與 mutation 同樣直截了當。

　　測試一個 getter 的示例：

// getters.js
export const getters = {
  filteredProducts (state, { filterCategory }) {
    return state.products.filter(product => {
      return product.category === filterCategory
    })
  }
}
// getters.spec.js
import { expect } from 'chai'
import { getters } from './getters'

describe('getters', () => {
  it('filteredProducts', () => {
    // 模擬狀態
    const state = {
      products: [
        { id: 1, title: 'Apple', category: 'fruit' },
        { id: 2, title: 'Orange', category: 'fruit' },
        { id: 3, title: 'Carrot', category: 'vegetable' }
      ]
    }
    // 模擬 getter
    const filterCategory = 'fruit'

    // 獲取 getter 的結果
    const result = getters.filteredProducts(state, { filterCategory })

    // 斷言結果
    expect(result).to.deep.equal([
      { id: 1, title: 'Apple', category: 'fruit' },
      { id: 2, title: 'Orange', category: 'fruit' }
    ])
  })
})

【執行測試】

　　若是mutation 和 action 編寫正確，通過合理地 mocking 處理以後這些測試應該不依賴任何瀏覽器 API，所以能夠直接用 webpack 打包這些測試文件而後在 Node 中執行。換種方式，也能夠用 mocha-loader 或 Karma + karma-webpack在真實瀏覽器環境中進行測試

在Node中執行測試

// webpack.config.js
module.exports = {
  entry: './test.js',
  output: {
    path: __dirname,
    filename: 'test-bundle.js'
  },
  module: {
    loaders: [
      {
        test: /\.js$/,
        loader: 'babel-loader',
        exclude: /node_modules/
      }
    ]
  }
}

　　而後

webpack
mocha test-bundle.js

在瀏覽器中測試

　　一、安裝 mocha-loader

　　二、上述 webpack 配置中的 entry 改爲 'mocha-loader!babel-loader!./test.js'

　　三、用以上配置啓動 webpack-dev-server

　　四、訪問 localhost:8080/webpack-dev-server/test-bundle

 

熱加載

　　使用 webpack 的 Hot Module Replacement API，Vuex 支持在開發過程當中熱重載 mutation、module、action 和 getter。也能夠在 Browserify 中使用 browserify-hmr 插件。

　　對於 mutation 和模塊，須要使用 store.hotUpdate() 方法：

// store.js
import Vue from 'vue'
import Vuex from 'vuex'
import mutations from './mutations'
import moduleA from './modules/a'

Vue.use(Vuex)

const state = { ... }

const store = new Vuex.Store({
  state,
  mutations,
  modules: {
    a: moduleA
  }
})

if (module.hot) {
  // 使 action 和 mutation 成爲可熱重載模塊
  module.hot.accept(['./mutations', './modules/a'], () => {
    // 獲取更新後的模塊
    // 由於 babel 6 的模塊編譯格式問題，這裏須要加上 `.default`
    const newMutations = require('./mutations').default
    const newModuleA = require('./modules/a').default
    // 加載新模塊
    store.hotUpdate({
      mutations: newMutations,
      modules: {
        a: newModuleA
      }
    })
  })
}