Vuex 和狀態管理

Vuex 是一個狀態管理庫，用于管理 Vue.js 應用程序中的應用程序級狀態。

它提供了集中式存儲、狀態突變和事件處理，有助于保持大型應用程序的有條理和可維護性。

創建 Vuex 模塊

Vuex 模塊是組織狀態、突變和行為邏輯的獨立單元。在初始化 Vuex 存儲時，可以創建多個模塊，每個模塊側重于應用程序的不同方面。

要創建模塊，請在 Vuex.Store 類中使用 module 選項：

import Vuex from 'vuex';const store = new Vuex.Store({modules: {// 創建一個名為 "user" 的模塊user: {// 模塊狀態state: {name: 'John Doe',email: 'john.doe@example.com',},// 模塊突變mutations: {updateName(state, newName) {state.name = newName;},updateEmail(state, newEmail) {state.email = newEmail;},},// 模塊 getters (可選)getters: {fullName(state) {return `${state.name} ${state.email}`;},},},},
});

定義狀態

模塊狀態是存儲在模塊中的數據。它通常是一個包含應用程序數據（例如用戶詳細信息、列表或設置）的對象。

在上面創建的 "user" 模塊中，狀態定義如下：

state: {name: 'John Doe',email: 'john.doe@example.com',
},

添加突變

突變是改變模塊狀態的方法。它們是 Vuex 中唯一可以修改狀態的方法。

突變必須是同步的，并在提交時接收一個 state 對象。在 "user" 模塊中，有以下突變：

mutations: {updateName(state, newName) {state.name = newName;},updateEmail(state, newEmail) {state.email = newEmail;},
},

通過 mapXXX 輔助函數映射狀態和突變

為了在 Vue 組件中方便地使用模塊狀態和突變，可以使用 mapState 和 mapMutations 輔助函數。

mapState 函數返回一個計算屬性函數，該函數返回模塊的狀態作為道具。 mapMutations 函數返回一個包含模塊突變的方法對象的道具。

例如，以下代碼使用 mapState 和 mapMutations 映射 "user" 模塊的 name 狀態和 updateName 突變到一個 Vue 組件：

import { mapState, mapMutations } from 'vuex';export default {// 映射模塊狀態為 propscomputed: mapState({name: state => state.user.name,}),// 映射模塊突變為 propsmethods: mapMutations(['updateName',]),
};

數據流方式

除了使用 Vuex 模塊，還有其他方法可以在 Vuex 中管理狀態，包括：

• 直接狀態：直接將狀態放在 Vuex.Store 實例上，而不使用模塊。
• Vuex 插件：使用第三方插件（例如 Vuex ORM）擴展 Vuex 的功能。
• 自有狀態管理：使用自定義狀態管理解決方案，而不依賴 Vuex。

結論

通過創建模塊、定義狀態并添加突變，可以初始化 Vuex 存儲。Vuex 模塊提供了對應用程序狀態的組織，而映射輔助函數簡化了在 Vue 組件中使用模塊。

除了 Vuex 模塊，還有多種數據流方式可用于滿足不同應用程序的需求。

---

---

相關標簽： 創建模塊、 狀態和突變、 vuex存儲數據幾種方式、 Vuex存儲初始化、

上一篇：Redux商店初始化配置中間件和增強器REDUX商

下一篇：React狀態初始化異步數據獲取和備忘錄選擇