腳本之家服務器常用軟件

快捷導航

詳解如何優(yōu)雅的進行Vue的狀態(tài)管理

更新時間：2023年09月28日 08:33:59 作者：anyup

隨著項目的發(fā)展和復雜性的增加,對 Vuex 進行更深入的了解和使用就變得非常重要,本篇文章將帶您探索 Vuex 的進階使用,包括模塊化、命名空間、getter 的高級用法等,需要的朋友可以參考下

輔助函數(shù)：簡化在 Vue 組件中使用 Vuex 的操作而提供的一組工具函數(shù)。
計算屬性：使用 getters 封裝復雜邏輯，使組件邏輯更清晰。
命名空間：詳解命名空間的作用和用法，避免模塊之間的命名沖突。
模塊化：將 Vuex 的狀態(tài)邏輯拆分成多個模塊，并實現(xiàn)模塊間的通信和協(xié)作。

通過學習本篇文章，你將進一步掌握 Vuex 的進階用法，提升對 Vuex 的理解和運用能力，更加優(yōu)雅的組織你的狀態(tài)管理樹！

一. 使用 Vuex 輔助函數(shù)

Vuex 輔助函數(shù)是為了簡化在 Vue 組件中使用 Vuex 的操作而提供的一組工具函數(shù)。使用輔助函數(shù)可以簡化對 state、getters、mutations 和 actions 的訪問，減少了冗余的代碼和復雜的語法。

下面是常見的 Vuex 輔助函數(shù)：

mapState：簡化狀態(tài)映射
mapGetters：簡化 getters 映射
mapMutations：簡化 mutations 映射
mapActions：簡化 actions 映射

1. mapState

mapState函數(shù)用于將 store 中的 state 映射到組件的計算屬性中，或者直接訪問這些 state 屬性。它接受一個數(shù)組或對象作為參數(shù)，用于指定要映射的 state 屬性名。

示例：

import { mapState } from 'vuex'
export default {
  computed {
    ...mapState(['count'])
  },  
  mounted () {
    console.log(this.count)
  },
}

count 對應的是 Vuex store 中的 state 屬性，通過使用mapState函數(shù)，將count屬性映射到了組件的計算屬性中，可以使用 this 實例直接獲取到

2. mapGetters

mapGetters函數(shù)用于將 store 中的 getters 映射到組件的計算屬性中，或者直接訪問這些 getters。它接受一個數(shù)組或對象作為參數(shù)，用于指定要映射的 getters 函數(shù)名。

示例：

import { mapGetters } from "vuex";
export default {
  computed: {
    ...mapGetters(["count"]),
  },
};

count 對應的是 Vuex store 中的 getter 函數(shù)，通過使用mapGetters函數(shù)，將count函數(shù)映射到了組件的計算屬性中。

3. mapMutations

mapMutations 函數(shù)用于將 store 中的 mutations 映射到組件的方法中，以便組件可以直接調(diào)用commit來觸發(fā) mutations。它接受一個數(shù)組或對象作為參數(shù)，用于指定要映射的 mutations 函數(shù)名。

示例：

import { mapMutations } from "vuex";
export default {
  methods: {
    ...mapMutations(["increment"]),
  },
};

increment 對應的是 Vuex store 中的 mutation 函數(shù)，通過使用mapMutations函數(shù)，將increment函數(shù)映射到了組件的方法中。

4. mapActions

mapActions函數(shù)用于將 store 中的 actions 映射到組件的方法中，以便組件可以直接調(diào)用dispatch來觸發(fā) actions。它接受一個數(shù)組或對象作為參數(shù)，用于指定要映射的 actions 函數(shù)名。

示例：

import { mapActions } from "vuex";
export default {
  methods: {
    ...mapActions(["incrementAsync"]),
  },
};

incrementAsync對應的是 Vuex store 中的 action 函數(shù)，通過使用mapActions函數(shù)，我們將incrementAsync函數(shù)映射到了組件的方法中。

Vuex 輔助函數(shù)的使用可以簡化在組件中對 Vuex 的調(diào)用和使用，使代碼更加簡潔和可讀。通過使用這些輔助函數(shù)，我們可以更方便地訪問和操作 store 中的 state、getters、mutations 和 actions。

二. 使用 getters 計算屬性

1. getters 的作用

在 Vuex 中，getters 是用于獲取狀態(tài)的計算屬性，類似于組件中的計算屬性。它們可以對 Vuex 中的狀態(tài)進行處理、篩選或組合，并以一種響應式的方式提供新的派生狀態(tài)。

getters 的作用是從 store 中獲取數(shù)據(jù)，并以一種經(jīng)過處理的形式進行展示或使用。在組件中使用 getters 可以方便地獲取所需的狀態(tài)，而不需要在組件內(nèi)部重復編寫邏輯。

2. getters 的使用步驟

定義 getters

在 Vuex 的模塊配置中，可以使用 getters 字段定義 getters。

const store = new Vuex.Store({
  state: { ... },
  mutations: { ... },
  actions: { ... },
  getters: {
    computedState: state => {
      // 處理 state 并返回派生狀態(tài)的計算屬性
      return state.someData + 10
    },
    filteredData: state => {
      // 根據(jù)條件篩選 state 中的數(shù)據(jù)并返回派生狀態(tài)
      return state.data.filter(item => item.condition === true)
    }
  }
})

以上我們定義了兩個 getters，分別是 computedState 和 filteredData。

使用 getters

在組件中可以使用 mapGetters 輔助函數(shù)或使用 $store.getters 來訪問 getters 的值。

import { mapGetters } from 'vuex'
export default {
  computed: {
    ...mapGetters(['computedState', 'filteredData'])
  },
  mounted() {
    console.log(this.computedState) // 輸出經(jīng)過處理的狀態(tài)值
    console.log(this.filteredData) // 輸出經(jīng)過篩選的數(shù)據(jù)數(shù)組
    console.log(this.$store.getters.computedState) // 通過 $store.getters 訪問
  }
}

在上面的代碼中，我們使用 mapGetters 輔助函數(shù)將 getters 映射到組件的計算屬性中，然后可以在組件中直接使用。

3. getters 的優(yōu)勢

Vuex 的 getters 在狀態(tài)管理中具有以下幾個優(yōu)勢：

統(tǒng)一管理計算屬性：有時需要根據(jù)一些狀態(tài)值進行一些復雜的計算，例如對狀態(tài)進行過濾、組合、轉換等操作，而 getters 可以讓我們統(tǒng)一管理這些計算屬性。通過將計算邏輯放在 getters 中，可以使代碼更具可維護性和可讀性。
響應式更新：Vuex 的 getters 是響應式的，當所依賴的狀態(tài)發(fā)生變化時，getters 會自動重新計算。這意味著當 getters 所依賴的狀態(tài)發(fā)生變化時，相關組件也會自動更新。這樣可以避免手動監(jiān)聽狀態(tài)的變化或手動觸發(fā)計算屬性的更新。
避免重復計算：Vuex 對 getters 進行了緩存優(yōu)化。只有在 getters 所依賴的狀態(tài)發(fā)生變化時，getters 才會重新計算。這樣可以避免不必要的計算開銷。而且，如果 getters 的值沒有發(fā)生變化，多次訪問它將會直接從緩存中讀取。這在某些情況下可以提升性能。
封裝復雜邏輯：有時候，某些狀態(tài)間的處理邏輯可能比較復雜，涉及多個模塊或多個狀態(tài)之間的交互。通過使用 getters，可以將這些復雜邏輯封裝到一個單獨的地方，使組件邏輯更清晰，減少代碼的冗余和重復。

Vuex 的 getters 在狀態(tài)管理中起到了統(tǒng)一管理計算屬性、實現(xiàn)響應式更新、避免重復計算、封裝復雜邏輯、提高可復用性和可測試性的作用。它們?yōu)殚_發(fā)者提供了一種方便且強大的方式來處理和展示狀態(tài)，使得應用程序的狀態(tài)管理更加簡潔、可維護和高效。

三. 命名空間

1. 什么是命名空間

在 Vuex 中，命名空間（namespaces）是一種組織和隔離模塊的方式，用于避免模塊之間的命名沖突。

命名空間為每個模塊提供了一個層級根，使得模塊的狀態(tài)、行為、和 getter 可以通過命名空間進行訪問。這樣，就可以在模塊的路徑前加上命名空間前綴，來確保模塊的所有內(nèi)容是唯一且不會與其他模塊產(chǎn)生沖突。

2. 如何使用命名空間

定義命名空間：

在模塊中，可以通過在模塊配置中設置 namespaced: true 來定義命名空間。例如：

const store = new Vuex.Store({
  modules: {
    myModule: {
      namespaced: true,
      state: { ... },
      mutations: { ... },
      actions: { ... },
      getters: { ... }
    }
  }
})

以上代碼是我們將名為 myModule 的模塊設置為命名空間模塊。

使用命名空間：

使用命名空間時，可以通過在訪問模塊的內(nèi)容之前添加命名空間前綴來引用模塊的狀態(tài)、行為和 getter。例如：

// 訪問命名空間模塊的狀態(tài)
store.state.myModule.stateName;
// 調(diào)用命名空間模塊的 mutation
store.commit("myModule/mutationName", payload);
// 調(diào)用命名空間模塊的 action
store.dispatch("myModule/actionName", payload);
// 獲取命名空間塊的 getter
store.getters["myModule/getterName"];

如上所示，我們使用命名空間前綴 myModule/ 來訪問和調(diào)用模塊的狀態(tài)、行為和 getter。

命名空間的使用使得模塊之間的關系更為清晰，并可以避免命名沖突。但是請注意：在使用命名空間時需要小心，確保正確地引用和調(diào)用模塊的內(nèi)容。

四. 模塊化管理

1. 模塊化組織結構

在 Vuex 中，可以使用模塊化的組織結構來管理大型的狀態(tài)管理。模塊化能夠將整個應用的狀態(tài)分割為多個小模塊，每個模塊都有自己的 state、mutations、getters 和 actions。

以下是 Vuex 中最簡單模塊化組織結構：

├── index.html
├── main.js
├── components // 組件
└── store
    ├── index.js         # 組裝模塊并導出 store 的主文件
    └── modules
        ├── moduleA.js   # moduleA 模塊
        └── moduleB.js   # moduleB 模塊

（1）定義 moduleA 模塊

// 創(chuàng)建一個模塊A
const moduleA = {
  state: {
    count: 0,
  },
  mutations: {
    increment(state) {
      state.count++;
    },
  },
  actions: {
    incrementAsync({ commit }) {
      setTimeout(() => {
        commit("increment");
      }, 1000);
    },
  },
  getters: {
    doubleCount(state) {
      return state.count * 2;
    },
  },
};
export default moduleA;

（3）引入所用模塊，并創(chuàng)建Vuex實例

import Vue from "vue";
import Vuex from "vuex";
import moduleA from "moduleA";
import moduleB from "moduleB";
Vue.use(Vuex);
// 創(chuàng)建Vuex實例
const store = new Vuex.Store({
  modules: {
    moduleA,
    moduleB,
  },
});
export default store;

上述示例中，我們定義了兩個模塊：moduleA 和 moduleB。每個模塊有自己的 state、mutations、actions 和 getters。在創(chuàng)建 Vuex 實例時，將這些模塊對象放入modules選項中。

在組件中使用模塊化的狀態(tài)時，可以通過輔助函數(shù)mapState、mapMutations、mapActions和mapGetters來簡化使用：

import { mapState, mapMutations, mapActions, mapGetters } from "vuex";
export default {
  computed: {
    ...mapState("moduleA", {
      countA: "count",
    }),
    ...mapState("moduleB", {
      nameB: "name",
    }),
    ...mapGetters("moduleA", ["doubleCount"]),
  },
  methods: {
    ...mapMutations("moduleA", ["increment"]),
    ...mapActions("moduleA", ["incrementAsync"]),
    ...mapMutations("moduleB", ["changeName"]),
  },
};

在上述示例中，通過指定模塊名，我們可以將模塊中的狀態(tài)和操作映射到組件的計算屬性和方法中。通過mapState可以將模塊 A 中的count映射為countA計算屬性，通過Mutations和mapActions可以將模塊 A 中的increment和incrementAsync映射為組件的方法。

通過模塊化組織結構，可以更好地管理和維護大型應用的狀態(tài)，使得狀態(tài)結構更加清晰和可維護。模塊化還可以方便地復用模塊，將模塊拆分為多個文件進行管理，提高開發(fā)效率。

注意：在模塊內(nèi)部的 mutations 和 getters 中，可以使用rootState和rootGetters參數(shù)來訪問根模塊中的狀態(tài)和 getters。例如，在 moduleA 的 mutations 中可以使用rootState.moduleB.name來獲取 moduleB 中的 name 狀態(tài)。

2. 使用模塊化的優(yōu)勢

代碼分離和組織：將 Vuex 的狀態(tài)邏輯分割成多個模塊，可以更好地組織代碼，提高代碼的可維護性和可讀性。每個模塊都有自己的狀態(tài)、操作和獲取器，使得代碼更加清晰和可擴展。
避免命名沖突：使用模塊化可以避免全局狀態(tài)中的命名沖突問題。每個模塊都有己的命名空間防止了不同模塊之間的命名沖突，提高了代碼的健壯性和穩(wěn)定性。
提高可復用性：模塊化的設計使得模塊可以在不同的應用程序中被復用。可以將通用的狀態(tài)模塊封裝成獨立的模塊，然后在不同的應用程序中引入并使用。
模塊獨立調(diào)試：每個模塊都可以獨立進行狀態(tài)的修改和操作，方便調(diào)試。通過模塊化，可以更加精確地定位到問題所在，快速解決 bug。

3. 什么情況下需要使用模塊化

大型應用程序：對于大型的 Vue.js 應用程序，使用模塊化可以更好地組織和管理狀態(tài)。不同模塊可以分別負責處理不同的業(yè)務邏輯，使得代碼更清晰。
多人協(xié)作開發(fā)：在多人協(xié)作開發(fā)的項目中，使用模塊化可以更好地分工合作。每個開發(fā)者可以負責一個或多個模塊的開發(fā)和維護，減少了代碼沖突和影響范圍，提高了開發(fā)效率。
復雜的業(yè)務邏輯：對于復雜的業(yè)務邏輯，使用模塊化可以將其拆分成多個獨立的模塊，使得代碼更易于理解和維護。每個模塊負責處理各自的邏輯，減少了耦合度。
可復用的模塊：如果有一些通用的狀態(tài)邏輯需要在不同的應用程序中復用，可以將其封裝成獨立的模塊。這樣可以避免重復編寫代碼，提高了開發(fā)效率和代碼的可維護性。