Vuex的核心概念

Vuex有5個核心概念，分別是State，Getters，mutations，Actions，Modules。

State

  Vuex使用單一狀態樹，也就是說，用一個物件包含了所有應用層級的狀態，作為唯一資料來源而存在。沒一個Vuex應用的核心就是store，store可理解為儲存應用程式狀態的容器。store與普通的全域性物件的區別有以下兩點：

  （1）Vuex的狀態儲存是響應式的。當Vue元件從store中檢索狀態的時候，如果store中的狀態發生變化，那麼元件也會相應地得到高效更新。

  （2）不能直接改變store中的狀態。改變store中的狀態的唯一途徑就是顯式地提交mutation。這可以確保每個狀態更改都留下可跟蹤的記錄，從而能夠啟用一些工具來幫助我們更好的理解應用

  安裝好Vuex之後，就可以開始建立一個store，程式碼如下：

const store =  new Vuex.Store({

  // 狀態資料放到state選項中

  state: {

    counter: 1000,

  },

  // mutations選項中定義修改狀態的方法

  // 這些方法接收state作為第1個引數

  mutations: {

    increment(state) {

      state.counter++;

    },

  },

});

  在元件中訪問store的資料，可以直接使用store.state.count。在模組化構建系統中，為了方便在各個單檔案元件中訪問到store，應該在Vue根例項中使用store選項註冊store例項，該store例項會被注入根元件下的所偶遇子元件中，在子元件中就可以通過this.$store來訪問store。程式碼如下：

new Vue({

  el: "#app",

  store,

})

  如果在元件中要展示store中的狀態，應該使用計算屬性來返回store的狀態，程式碼如下：

computed: {

    count(){

        return this.$store.state.count

    }

}

  之後在元件的模板中就可以直接使用count。當store中count發生改變時，元件內的計算屬性count也會同步發生改變。

  那麼如何更改store中的狀態呢？注意不要直接去修改count的值，例如：

methods: {

    handleClick(){

        this.&store.state.count++;    // 不要這麼做

    }

}

  既然選擇了Vuex作為你的應用的狀態管理方案，那麼就應該遵照Vuex的要求；通過提交mutation來更改store中的狀態。在嚴格模式下，如果store中的狀態改變不是有mutation函式引起的，則會丟擲錯誤，而且如果直接修改store中的狀態，Vue的除錯工具也無法跟蹤狀態的改變。在開發階段，可以開啟嚴格模式，以避免位元組的狀態修改，在建立store的時候，傳入strict: true程式碼如下：

const store = new Vuex.Store({

    strict: true

})

  Vuex中的mutation非常類似於事件：每個mutation都有一個字串的事件型別和一個處理器函式，這個處理器函式就是實際進行狀態更改的地方，它接收state作為第1個引數。

  我們不能直接呼叫一個mutation處理器函式，mutations選項更像是事件註冊，當觸發一個型別為increment的mutation時，呼叫此函式。要呼叫一個mutation處理器函式，需要它的型別去呼叫store.commit方法，程式碼如下：

store.commit("increment")

Getters

  假如在store的狀態中定義了一個圖書陣列，程式碼如下：

export default new Vuex.Store({

  state: {

    books: [

      { id: 1, title: "Vue.js", isSold: false },

      { id: 2, title: "common.js", isSold: true },

      { id: 3, title: "node.js", isSold: true },

    ],

  },

})

  在元件內需要得到正在銷售的書，於是定義一個計算屬性sellingBooks，對state中的books進行過濾，程式碼如下：

computed: {

    sellingBooks(){

        return this.$store.state.books.filter(book => book.isSold === true);

    }

}

  這沒有什麼問題，但如果是多個元件都需要用到sellingBooks屬性，那麼應該怎麼辦呢？是複製程式碼，還是抽取為共享函式在多處匯入？顯然，這都不理想

  Vuex允許我們在store中定義getters（可以認為是store的計算屬性）。與計算屬性一樣，getter的返回值會根據它的依賴項被快取起來，且只有在它的依賴項發生改變時才會重新計算。

  getter接收state作為其第1個引數，程式碼如下：

export default new Vuex.Store({

  state: {

    books: [

      { id: 1, title: "Vue.js", isSold: false },

      { id: 2, title: "common.js", isSold: true },

      { id: 3, title: "node.js", isSold: true },

    ],

  },

  getters: {

    sellingBooks(state) {

      return state.books.filter((b) => b.isSold === true);

    },

  }

})

  我們定義的getter將作為store.getters物件的豎向來訪問，程式碼如下；

<h3>{{ $store.getters.sellingBooks }}</h3>

getter也可以接收其他getter作為第2個引數，程式碼如下：

getters: {

    sellingBooks(state) {

      return state.books.filter((b) => b.isSold === true);

    },

    sellingBooksCount(state, getters) {

      return getters.sellingBooks.length;

    },

}

  在元件內，要簡化getter的呼叫，同樣可以使用計算屬性，程式碼如下：

computed: {

    sellingBooks() {

      return this.$store.getters.sellingBooks;

    },

    sellingBooksCount() {

      return this.$store.getters.sellingBooksCount;

    },

  },

  要注意，作為屬性訪問的getter作為Vue的響應式系統的一部分被快取。

  如果想簡化上述getter在計算屬性中的訪問形式，可以使用mapGetters輔助函式。mapGetters 輔助函式僅僅是將 store 中的 getter 對映到區域性計算屬性：

import { mapGetters } from 'vuex'

export default {

  // ...

  computed: {

  // 使用物件展開運算子將 getter 混入 computed 物件中

    ...mapGetters([

        "sellingBooks",

        "sellingBooksCount"

    ]),

  }

}

如果你想將一個 getter 屬性另取一個名字，使用物件形式：

...mapGetters({

  // 把 `this.booksCount` 對映為 `this.$store.getters.sellingBooksCount`

  booksCount: 'sellingBooksCount'

})

  getter還有更靈活的用法，用過讓getter返回一個函式，來實現給getter傳參。例如，下面的getter根據圖書ID來查詢圖書物件

getters: {

    getBookById(state) {

      return function (id) {

        return state.books.filter((book) => book.id === id);

      };

    },

}

  如果你對箭頭函式已經掌握的爐火純青，那麼可以使用箭頭函式來簡化上述程式碼

getters: {

    getBookById(state) {

      return (id) => state.books.filter((book) => book.id === id);

    },

下面在元件模板中的呼叫返回{ "id": 1, "title": "Vue.js", "isSold": false }

<h3>{{ $store.getters.getBookById(1) }}</h3>

mutation

上面已經介紹了更改store中的狀態的唯一方式是提交mutation。

提交載荷（Payload）

在使用store.commit方法提交mutation時，還可以傳入額外的引數，即mutation的載荷（payload），程式碼如下：

mutations: {

    increment(state, n) {

      state.counter+= n;

    },

  },

store,commit("increment", 10)

載荷也可以是一個物件，程式碼如下:

mutations: {

  increment (state, payload) {

    state.count += payload.amount

  }

}

store.commit('increment', {

  amount: 10

})

物件風格的提交方式

提交mutation時，也可以使用包含type屬性的物件，這樣傳一個引數就可以了。程式碼如下所示：

store.commit({

  type: "increment",

  amount: 10

})

當使用物件風格提交時，整個物件將作為載荷還給mutation函式，因此處理器保持不變。程式碼如下：

mutations: {

  increment (state, payload) {

    state.count += payload.amount

  }

}

在元件中提交mutation時，使用的是this.$store.commit("increment")，如果你覺得這樣比較繁瑣，可以使用mapMutations輔助函式將元件中的方法對映為store.commit呼叫，程式碼如下：

import { mapMutations } from "vuex";

methods: {

    ...mapMutations([

      // 將this.increment()對映為this.$store.commit("increment")

      "increment",

    ]),

}

除了使用字串陣列外，mapMutations函式的引數也可以是一個物件

import { mapMutations } from "vuex";

methods: {

    ...mapMutations([

      // 將this.add()對映為this.$store.commit("increment")

      add: "increment",

    ]),

}

Mutation 需遵守 Vue 的響應規則

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

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

2.當需要在物件上新增新屬性時，你應該

• 使用 Vue.set(obj, 'newProp', 123), 或者
• 以新物件替換老物件。例如，利用物件展開運算子 (opens new window)我們可以這樣寫：

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

使用常量替代 Mutation 事件型別

我們可以使用常量來替代mutation型別。可以把常量放到一個單獨的JS檔案中，有助於專案團隊對store中所包含的mutation一目瞭然，例如：

// mutation-types.js

export const INCREMENT = "increment";

// store.js

import Vuex from "vuex";

import { INCREMENT } from "./mutation-types";

const store = new Vuex.Store({

  state: { ... },

  mutations: {

    // 我們可以使用 ES2015 風格的計算屬性命名功能來使用一個常量作為函式名

    [INCREMENT] (state) {

      // mutate 狀態

    }

  }

})

Actions

  在定義mutation時，有一個重要的原則就是mutation必須是同步函式，換句話說，在mutation處理器函式中，不能存在非同步呼叫，比如

const store = new Vuex.Store({

  state: {

    count: 0

  },

  mutations: {

    increment (state) {

      setTimeout( () => {

        state.count++

      }, 2000)

    }

  }

})

  在increment函式中呼叫setTimeout()方法在2s後更新count，這就是一個非同步呼叫。記住，不要這麼做，因為這會讓除錯變得困難。假設正在除錯應用程式並檢視devtool中的mutation日誌，對於每個記錄的mutation，devtool都需要捕捉到前一狀態的快照。然而，在上面的例子中，mutation中的setTimeout方法中的回撥讓這不可能完成。因為當mutation被提交的時候，回撥函式還沒有被呼叫，devtool也無法知道回撥函式什麼時候真正被呼叫。實際上，任何在回撥函式中執行的狀態的改變都是不可追蹤的。

  如果確實需要執行非同步操作，那麼應該使用action。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。甚至可以用context.dispatch呼叫其他的action。要注意的是，context物件並不是store例項本身

  如果在action中需要多次呼叫commit，則可以考慮使用ECMAScript6中的解構語法來簡化程式碼，如下所示：

actions: {

    increment({ commit }) {

      commit("increment");

    },

  },

  action通過store.dispatch方法觸發，程式碼如下：

actions: {

    incrementAsync({ commit }) {

      setTimeout(() => {

        commit("increment");

      }, 2000);

    },

  },

  action同樣支援載荷和物件方式進行分發。程式碼如下所示：

// 載荷是一個簡單的值

store.dispatch("incrementAsync", 10)

// 載荷是一個物件

store.dispatch("incrementAsync", {

  amount: 10

})

// 直接傳遞一個物件進行分發

store.dispatch({

  type: "incrementAsync",

  amount: 10

})

  在元件中可以使用this.$store.dispatch("xxx")分發action，或者使用mapActions輔助函式將元件的方法對映為store.dispatch呼叫，程式碼如下：

// store.js

const store = new Vuex.Store({

  state: {

    count: 0

  },

  mutations: {

    increment (state) {

      state.count++

    },

    incrementBy(state, n){

      state.count += n;

    }

  },

  actions: {

    increment({ commit }) {

      commit("increment");

    },

    incrementBy({ commit }, n) {

      commit("incrementBy", n);

    },

  },

})

// 元件

<template>

  <div id="app">

    <button @click="incrementNumber(10)">+10</button>

  </div>

</template>

import { mapActions } from "vuex";

export default {

  name: "App",

  methods: {

    ...mapActions(["increment", "incrementBy"]),

};

  action通常是非同步的，那麼如何知道action何時完成呢？更重要的是，我們如何才能組合多個action來處理更復雜的非同步流程呢？

  首先，要知道是store.dispatch可以處理被觸發的action的處理函式返回的Promise，並且store.dispatch仍舊返回Promise，例如：

actionA({ commit }) {

      return new Promise((resolve, reject) => {

        setTimeout(() => {

          commit("increment");

          resolve();

        }, 1000);

      });

    },

現在可以：

store.dispatch("actionA").then(() => {

...

})

在另外一個action中也可以

actions: {

  //...

  actionB({dispatch, commit}) {

    return dispatch("actionA").then(() => {

      commit("someOtherMutation")

    })

  }

}

最後，如果我們利用 async / await (opens new window)，我們可以如下組合 action：

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

actions: {

  async actionA ({ commit }) {

    commit('gotData', await getData())

  },

  async actionB ({ dispatch, commit }) {

    await dispatch('actionA') // 等待 actionA 完成

    commit('gotOtherData', await getOtherData())

  }

}

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

    }

  }

}

專案結構

Vuex 並不限制你的程式碼結構。但是，它規定了一些需要遵守的規則：

1.應用層級的狀態應該集中到單個 store 物件中。

2.提交 mutation 是更改狀態的唯一方法，並且這個過程是同步的。

3.非同步邏輯都應該封裝到 action 裡面。

只要你遵守以上規則，如何組織程式碼隨你便。如果你的 store 檔案太大，只需將 action、mutation 和 getter 分割到單獨的檔案。

對於大型應用，我們會希望把 Vuex 相關程式碼分割到模組中。下面是專案結構示例：

└── store

    ├── index.js          # 我們組裝模組並匯出 store 的地方

    ├── actions.js        # 根級別的 action

    ├── mutations.js      # 根級別的 mutation

    └── modules

        ├── cart.js       # 購物車模組

        └── products.js   # 產品模組