vue（23）Vuex的5個核心概念

Silent丿丶黑羽發表於2021-07-26

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   # 產品模組

vuex 中的核心概念及原理
2019-04-09
Vue
Vue教程23：Vuex非同步Action
2019-01-01
Vue非同步
1.vuex是什麼？ 2.vuex的核心概念；（vuex的屬性；vuex的資料傳遞流程；） 3.為什麼要用vuex？
2021-01-01
Vue
VUE全家桶之vuex核心原理解析
2019-03-20
Vue
CSS核心的幾個概念
2016-01-07
CSS
vue - Vuex
2022-05-10
Vue
vuex 的概念和基礎使用
2018-03-05
Vue
深入理解Vue元件3大核心概念
2019-06-21
Vue元件
Vue--Vuex
2018-03-19
Vue
vue中vuex的五個基本屬性和用法
2020-12-09
Vue
Web教程：7個CSS核心概念
2022-05-31
WebCSS
ECS的核心概念
2020-12-21
計算機網路的 89 個核心概念
2021-06-28
計算機網路
33 個 JavaScript 核心概念系列（四）: == 與 ===
2019-01-05
JavaScript
VUE全家桶之vuex的使用
2019-03-27
Vue
Vuex——Vue的狀態管理利器
2021-09-09
Vue
Spark 的核心概念 RDD
2019-04-20
Spark
Laravel中的核心概念
2019-02-16
Laravel
理解maven的核心概念
2013-04-08
Maven
Vue —— VueX精講(1）
2020-06-11
Vue
vue實踐之vuex
2019-03-03
Vue
Vue踩坑之旅——Vuex
2018-03-26
Vue
[譯] 5個Vuex外掛，給你的下個VueJS專案
2017-11-28
VueJS
vue+vue-router+vuex地址管理思路
2019-03-04
Vue
Redux 核心概念
2021-09-09
Redux
【RabbitMQ】核心概念
2018-07-01
MQ
Redis 核心概念
2017-07-26
Redis
ES 核心概念
2024-04-19
Vue秩序白銀 —構建自己的Vuex
2019-03-21
Vue
vue（22）Vuex的安裝與使用
2021-07-24
Vue
vue的狀態管理模式—vuex
2018-10-19
Vue模式
如何通過 Vue-Cli3 - Vuex 完成一個 TodoList
2019-05-22
Vue
Git 的核心概念解讀
2016-10-04
Git
webpack (1)——核心概念的理解
2018-05-17
Web
vue 學習筆記 - vuex
2019-02-27
Vue筆記
【Vue 極速指南】Vuex 篇
2021-09-09
Vue
vue升級之路（四）-- Vuex
2018-09-21
Vue
Vue入門到跑路---Vuex
2020-11-03
Vue