Vuex初識

vuex是vue中單向數據流的一個狀態管理模式，它能夠集中存儲管理應用中全部組件的狀態，而且有一套相應的規則能夠去預測數據的變化。相似與此的還有react中的redux,dva等狀態管理模式。

通常咱們的狀態管理包含如下幾個部分：

• state 這是驅動頁面變化的數據源
• view state數據展現的視圖
• action 在view層用戶操做數據變化的響應

vue中的數據流爲單向數流

單向數據流在兄弟組件須要傳參或者多個組件須要使用同一個狀態而且多個組將均可以改變該狀態時不易進行維護。

所以，咱們採起的是將多個共用的狀態抽離到一個全局單例中（實際上就是將組件的狀態抽離出來進行單獨管理），其實在redux和dva中，是將每一個組件的狀態抽離到它本身的單例狀態中，而且這些單例狀態之間是互通的。

vuex中數據流的一個大概的流程是，咱們再視圖層經過觸發一個一個的action到mutations中，mutataions中改變對應的state,而後該state的變化會去影響所對應的視圖層的html結構。

固然正如其餘狀態機模式同樣，若是你不打算開發大型單頁應用，也是不必去使用vuex。

核心概念

vuex應用的核心就是store,store中包含着咱們應用中的大部分狀態，vuex的狀態存儲是快速響應的，當store中的state有變化時，相應的組件也會快速的更新。而且咱們須要遵循vuex中的規則，沒法直接去改變state,改變store中的狀態的惟一途徑就是經過commit.

經過每次的commit中所含的信息，咱們能夠輕鬆明確的去看到咱們每次改變state的意圖，這樣也方便咱們未來對數據的追蹤。

state

因爲vuex使用單一狀態樹，也就是一個應用中的state你能夠所有放到這一個store中，可是若是你放置的狀態過多的時候，這也是挺雞肋的不是？我尚未去看vuex如何將狀態和狀態變動的事件分佈到各個子模塊中去。

mapState是vuex提供的簡化數據訪問的輔助函數，mapState函數返回的是一個對象，一般，咱們須要使用一個工具函數將多個對象合併爲一個，以使咱們能夠將最終對象傳給computed屬性。

固然，使用vuex並不意味着咱們將全部的狀態放入vuex，雖然將全部的狀態放到vuex會使狀態變化更顯示和易調試，可是若是所有放到了全局Store中咱們的代碼會變得冗長和不直觀，因此這些個東西還須要邊開發邊權衡吧。

Getter

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

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

vuex容許咱們在store中定義「getter".就像計算屬性同樣，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對象：
getter相似於dva中的reducer。

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

mapGetters輔助函數

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

computed:{
    ...mapGetters(['getter1','getter2'])
}

按照上述寫法，全局store中的getter1和getter2函數即可以在局部組件中使用了。
若是想將一個getter屬性另取一個名字，使用對象形式：

computed:{
    ...mapGetters({
        newGetter:"oldStoreGetter"
    })
}

Mutation

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

mutations: {
    setAdminInfo(state,adminInfo){
      state.adminInfo = adminInfo;
    },
    setCityList(state,cityList){
      state.cityList = cityList
    }
  }

固然了，咱們還不能直接調用mutation handler,咱們想要執行此函數時，須要以相應的type調用store.commit方法:

當咱們須要給mutation傳參時，咱們須要經過payload來進行,上述例子中的adminInfo就是咱們要傳的的參數，在vuex中叫payload，固然，官方的建議是payload儘可能是一個對象，這樣咱們在使用的時候可以更好的去追蹤數據流。

固然，更好的調用mutation的方式是commit包含type屬性的對象：

store.commit({
    type:'updateAdminInfo',
    adminInfo:{
        username:'allen',
        password:'qwe123',
    }
})

mutation須要遵照vue的響應規則

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

• 在store中初始化好全部的屬性
• 使用新對象替換老對象，即每次都返回一個全新的state對象，可使用Object.Assign的方式。

使用常亮替代Mutation事件類型

使用常量替代mutation事件類型再各類flux實現中是很常見的模式。可使咱們整個項目的數據流向一目瞭然。

固然，另外重要的一點就是mutation必須是同步函數，當咱們再debug一個app而且觀察devtool的mutation日誌時，每一條mutation被記錄，都須要捕捉到前一狀態和後一狀態的快照。

咱們能夠在組件中使用this.$store.commit("example")提交mutation,或者使用mapMutations輔助函數將組件中的methods映射爲store.commit調用。

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

Action相似於mutation,不一樣在於:

• Action提交的是mutation，而不是直接變動狀態。
• Action能夠包含任意異步操做。

下邊來看一個簡單的action的例子：
jsconst store = new Vuex.Store({ state: { count: 0 }, mutations: { increment (state) { state.count++ } }, actions: { increment (context) { context.commit('increment') } } }) const store = new Vuex.Store({ state: { count: 0 }, mutations: { increment (state) { state.count++ } }, actions: { increment (context) { context.commit('increment') } } })

Action經過store.dispatch方法觸發：

store.dispatch('increment');

使用action進行觸發mutation能夠不用受必須同步執行的約束。咱們能夠在Action內部執行異步操做。

一樣Action中也可使用payload來傳遞參數

store.dispatch({
    type:"increment",
    amount:10
})

同時，Action一般是異步的，store.dispatch能夠處理被觸發的action的處理函數返回的Promise,而且store.dispatch仍然返回Promise.

如今，咱們已經不須要去執行promise.then函數了，咱們直接用async/await就能夠了。

async action1({commit}){
    commit('gotData', await getData());
}

Module

使用單一狀態樹，應用的全部狀態會集中到一個比較大的對象中。當應用變得很是複雜時，store對象就會變得十分臃腫。

vuex容許咱們將store分割成模塊，每一個模塊擁有本身的state,mutation,acion,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,接受的第一個參數是模塊的局部狀態對象。一樣的，對於模塊內部的action，局部狀態經過context.state暴露出來，根節點狀態則爲context.rootState；

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

命名空間

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

固然，模塊化中，咱們可使用namespaced:true的方式使其成爲命名空間模塊。當模塊被註冊以後，他的全部getter、Action、以及mutation都會自動根據模塊註冊的路徑調整命名。啓用了命名空間以後，即是將一個總體的store給分割成了一個個模塊。

模塊動態註冊

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

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

固然，咱們也能夠經過store.unregisterModule（moduleName）來動態卸載模塊。可是咱們沒法使用此方法去卸載靜態模塊。

---

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

• 應用層級的狀態應該集中到單個store對象中。
• 提交mutation是更改狀態的惟一辦法，而且這個過程是同步的。
• 異步邏輯都應該封裝在Action裏面。