1、vuex是什么？

Vuex 是一個專為 Vue.js 應(yīng)用程序開發(fā)的狀態(tài)管理模式。

什么是“狀態(tài)管理模式”？

vue狀態(tài)自管理應(yīng)用包含以下幾個部分：

• state，驅(qū)動應(yīng)用的數(shù)據(jù)源；
• view，以聲明方式將 state 映射到視圖；
• actions，響應(yīng)在 view 上的用戶輸入導(dǎo)致的狀態(tài)變化。

以下是一個表示“單向數(shù)據(jù)流”理念的簡單示意：

flow.png

多個組件共享狀態(tài)時，單向數(shù)據(jù)流的簡潔性很容易被破壞：

• 多個視圖依賴于同一狀態(tài)。
• 來自不同視圖的行為需要變更同一狀態(tài)。

對于問題一，傳參的方法對于多層嵌套的組件將會非常繁瑣，并且對于兄弟組件間的狀態(tài)傳遞無能為力。

對于問題二，我們經(jīng)常會采用父子組件直接引用或者通過事件來變更和同步狀態(tài)的多份拷貝。以上的這些模式非常脆弱，通常會導(dǎo)致無法維護的代碼。

因此，我們?yōu)槭裁床话呀M件的共享狀態(tài)抽取出來，以一個全局單例模式管理呢？

在這種模式下，我們的組件樹構(gòu)成了一個巨大的“視圖”，不管在樹的哪個位置，任何組件都能獲取狀態(tài)或者觸發(fā)行為！

vuex數(shù)據(jù)狀態(tài)管理模式：

vuex.png

什么情況下適合使用vuex？

大中型的單頁面應(yīng)用。

每一個 Vuex 應(yīng)用的核心就是 store（倉庫）?！皊tore”基本上就是一個容器，它包含著你的應(yīng)用中大部分的狀態(tài) (state)。

Vuex 和單純的全局對象有以下兩點不同：

Vuex 的狀態(tài)存儲是響應(yīng)式的。當 Vue 組件從 store 中讀取狀態(tài)的時候，若 store 中的狀態(tài)發(fā)生變化，那么相應(yīng)的組件也會相應(yīng)地得到高效更新。

你不能直接改變 store 中的狀態(tài)。改變 store 中的狀態(tài)的唯一途徑就是顯式地提交 (commit) mutation。這樣使得我們可以方便地跟蹤每一個狀態(tài)的變化，從而讓我們能夠?qū)崿F(xiàn)一些工具幫助我們更好地了解我們的應(yīng)用

2 vuex的核心概念

1、State

Vuex 使用單一狀態(tài)樹，用一個對象就包含了全部的應(yīng)用層級狀態(tài)。

mapState輔助函數(shù)

2、Getter

mapStateGetters輔助函數(shù)

Vuex 允許我們在 store 中定義“getter”（可以認為是 store 的計算屬性）。就像計算屬性一樣，getter 的返回值會根據(jù)它的依賴被緩存起來，且只有當它的依賴值發(fā)生了改變才會被重新計算。

3、Mutation

更改 Vuex 的 store 中的狀態(tài)的唯一方法是提交 mutation。

Vuex 中的 mutation 非常類似于事件：每個 mutation 都有一個字符串的 事件類型 (type) 和 一個 回調(diào)函數(shù) (handler)。這個回調(diào)函數(shù)就是我們實際進行狀態(tài)更改的地方，并且它會接受 state 作為第一個參數(shù)：

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

你不能直接調(diào)用一個 mutation handler。這個選項更像是事件注冊：“當觸發(fā)一個類型為 increment的 mutation 時，調(diào)用此函數(shù)?！币獑拘岩粋€ mutation handler，你需要以相應(yīng)的 type 調(diào)用 store.commit 方法：

store.commit('increment')

提交載荷（Payload）

你可以向store.commit傳入額外的參數(shù)，即 mutation 的 載荷（payload）：

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

在大多數(shù)情況下，載荷應(yīng)該是一個對象，這樣可以包含多個字段并且記錄的 mutation 會更易讀：

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

對象風(fēng)格的提交方式

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

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

當使用對象風(fēng)格的提交方式，整個對象都作為載荷傳給 mutation 函數(shù)，因此 handler 保持不變：

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

Mutation 需遵守 Vue 的響應(yīng)規(guī)則

既然 Vuex 的 store 中的狀態(tài)是響應(yīng)式的，那么當我們變更狀態(tài)時，監(jiān)視狀態(tài)的 Vue 組件也會自動更新。這也意味著 Vuex 中的 mutation 也需要與使用 Vue 一樣遵守一些注意事項：

1、最好提前在你的 store 中初始化好所有所需屬性。

2、當需要在對象上添加新屬性時，你應(yīng)該

• 使用Vue.set(obj,'key',123), 或者
• 以新對象替換老對象。例如，利用對象展開運算符我們可以這樣寫：

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

使用常量替代 Mutation 事件類型

使用常量替代 mutation 事件類型在各種 Flux 實現(xiàn)中是很常見的模式。這樣可以使 linter 之類的工具發(fā)揮作用，同時把這些常量放在單獨的文件中可以讓你的代碼合作者對整個 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 風(fēng)格的計算屬性命名功能來使用一個常量作為函數(shù)名
    [SOME_MUTATION] (state) {
      // mutate state
    }
  }
})

用不用常量取決于你——在需要多人協(xié)作的大型項目中，這會很有幫助。但如果你不喜歡，你完全可以不這樣做。

Mutation 必須是同步函數(shù)

一條重要的原則就是要記住 mutation 必須是同步函數(shù)。為什么？請參考下面的例子：

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

現(xiàn)在想象，我們正在 debug 一個 app 并且觀察 devtool 中的 mutation 日志。每一條 mutation 被記錄，devtools 都需要捕捉到前一狀態(tài)和后一狀態(tài)的快照。然而，在上面的例子中 mutation 中的異步函數(shù)中的回調(diào)讓這不可能完成：因為當 mutation 觸發(fā)的時候，回調(diào)函數(shù)還沒有被調(diào)用，devtools 不知道什么時候回調(diào)函數(shù)實際上被調(diào)用——實質(zhì)上任何在回調(diào)函數(shù)中進行的狀態(tài)的改變都是不可追蹤的。

#在組件中提交 Mutation

你可以在組件中使用this.store.commit 提交 mutation，或者使用mapMutations輔助函數(shù)將組件中的 methods 映射為store.commit 調(diào)用（需要在根節(jié)點注入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')`
    })
  }
}

4、action

Action 類似于 mutation，不同在于：

• Action 提交的是 mutation，而不是直接變更狀態(tài)。
• Action 可以包含任意異步操作。

分發(fā) Action

Action 通過store.dispatch方法觸發(fā)：

store.dispatch('increment')

對象風(fēng)格分發(fā)

在組件中分發(fā) Action

你在組件中使用this.$store.dispath('xxx')分發(fā) action，或者使用mapActons輔助函數(shù)將組件的 methods 映射為store.dispatch調(diào)用（需要先在根節(jié)點注入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')`
    })
  }
}

5、module

Vuex 允許我們將 store 分割成模塊（module）。每個模塊擁有自己的 state、mutation、action、getter、甚至是嵌套子模塊——從上至下進行同樣方式的分割：

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

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

模塊的局部狀態(tài)

對于模塊內(nèi)部的 mutation 和 getter，接收的第一個參數(shù)是模塊的局部狀態(tài)對象。

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

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

同樣，對于模塊內(nèi)部的 action，局部狀態(tài)通過context.state暴露出來，根節(jié)點狀態(tài)則為context.rootState：

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

對于模塊內(nèi)部的 getter，根節(jié)點狀態(tài)會作為第三個參數(shù)暴露出來：

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

命名空間

默認情況下，模塊內(nèi)部的 action、mutation 和 getter 是注冊在全局命名空間的——這樣使得多個模塊能夠?qū)ν?mutation 或 action 作出響應(yīng)。

如果希望你的模塊具有更高的封裝度和復(fù)用性，你可以通過添加namespaced: true的方式使其成為帶命名空間的模塊。當模塊被注冊后，它的所有 getter、action 及 mutation 都會自動根據(jù)模塊注冊的路徑調(diào)整命名。例如：

const store = new Vuex.Store({
  modules: {
    account: {
      namespaced: true,

      // 模塊內(nèi)容（module assets）
      state: () => ({ ... }), // 模塊內(nèi)的狀態(tài)已經(jīng)是嵌套的了，使用 `namespaced` 屬性不會對其產(chǎn)生影響
      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 會收到局部化的state，dispatch和commit。換言之，你在使用模塊內(nèi)容（module assets）時不需要在同一模塊內(nèi)額外添加空間名前綴。更改namespace屬性后不需要修改模塊內(nèi)的代碼。

在帶命名空間的模塊內(nèi)訪問全局內(nèi)容（Global Assets）

如果你希望使用全局 state 和 getter，rootState和rootGetters會作為第三和第四參數(shù)傳入 getter，也會通過context對象的屬性傳入 action。

若需要在全局命名空間內(nèi)分發(fā) action 或提交 mutation，將{‘root’：true}作為第三參數(shù)傳給dispatch或commit即可。

modules: {
  foo: {
    namespaced: true,

    getters: {
      // 在這個模塊的 getter 中，`getters` 被局部化了
      // 你可以使用 getter 的第四個參數(shù)來調(diào)用 `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) { ... }
    }
  }
}

在帶命名空間的模塊注冊全局 action

若需要在帶命名空間的模塊注冊全局 action，你可添加root:true，并將這個 action 的定義放在函數(shù)handler 中。例如：

{
  actions: {
    someOtherAction ({dispatch}) {
      dispatch('someAction')
    }
  },
  modules: {
    foo: {
      namespaced: true,

      actions: {
        someAction: {
          root: true,
          handler (namespacedContext, payload) { ... } // -> 'someAction'
        }
      }
    }
  }
}

帶命名空間的綁定函數(shù)

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

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

對于這種情況，你可以將模塊的空間名稱字符串作為第一個參數(shù)傳遞給上述函數(shù)，這樣所有綁定都會自動將該模塊作為上下文。于是上面的例子可以簡化為：

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

而且，你可以通過使用 createNamespacedHelpers創(chuàng)建基于某個命名空間輔助函數(shù)。它返回一個對象，對象里有新的綁定在給定命名空間值上的組件綁定輔助函數(shù)：

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