前言
在单页应用开发中，状态管理是一个重要的问题。Vuex 是一个专为 Vue.js 应用程序开发的状态管理模式。它采用集中式存储管理应用的所有组件的状态，并以相应的规则保证状态以一种可预测的方式发生变化。本文将介绍 Vuex 的基本概念和用法，并结合实际项目开发经验，进行实践教程。
Vuex 基本概念
State
Vuex 使用单一状态树，即使用一个对象存储整个应用的状态。这个状态对象包含多个属性，每个属性对应一个需要管理的状态。
const store = new Vuex.Store({
state: {
count: 0
}
})在组件中可以通过 this.$store.state.count 访问 count 属性的值。
Getter
Getter 用于从 store 中获取数据，类似于计算属性。Getter 可以接收其他 Getter 作为第二个参数。
-- -------------------- ---- -------
----- ----- - --- ------------
------ -
------ -
- --- -- ----- ----- --- ----- ---- --
- --- -- ----- ----- --- ----- ----- -
-
--
-------- -
---------- ----- -- -
------ ----------------------- -- ----------
--
--------------- ------- -------- -- -
------ ------------------------
-
-
--在组件中可以通过 this.$store.getters.doneTodos 获取已完成的任务列表，通过 this.$store.getters.doneTodosCount 获取已完成任务的数量。
Mutation
Mutation 用于修改 store 中的数据，Mutation 必须是同步函数。
-- -------------------- ---- -------
----- ----- - --- ------------
------ -
------ -
--
---------- -
--------- ------- -
-------------
-
-
--在组件中可以通过 this.$store.commit('increment') 调用 increment Mutation，从而修改 count 属性的值。
Action
Action 用于异步修改 store 中的数据，Action 可以包含任意异步操作。
-- -------------------- ---- -------
----- ----- - --- ------------
------ -
------ -
--
---------- -
--------- ------- -
-------------
-
--
-------- -
-------------- -- ------ -- -
------------- -- -
-------------------
-- -----
-
-
--在组件中可以通过 this.$store.dispatch('incrementAsync') 调用 incrementAsync Action，从而异步修改 count 属性的值。
Module
Module 可以将 store 分割成多个小的 store，每个 Module 可以包含 State、Getter、Mutation、Action。
-- -------------------- ---- -------
----- ------- - -
------ - --- --
---------- - --- --
-------- - --- --
-------- - --- -
-
----- ------- - -
------ - --- --
---------- - --- --
-------- - --- -
-
----- ----- - --- ------------
-------- -
-- --------
-- -------
-
--在组件中可以通过 this.$store.state.a 访问 ModuleA 的 State，通过 this.$store.commit('a/increment') 调用 ModuleA 的 Mutation。
实践教程
安装 Vuex
在项目中使用 Vuex，需要先安装 Vuex。
npm install vuex --save
创建 store
在项目中创建 store.js 文件，定义 State、Getter、Mutation、Action、Module。
-- -------------------- ---- -------
------ --- ---- -----
------ ---- ---- ------
-------------
----- ----- - -
------ -
-
----- ------- - -
---------- ----- -- ----------- - - --- - - ------ - -----
-
----- --------- - -
--------- ------- -
-------------
--
--------- ------- -
-------------
-
-
----- ------- - -
-------------- -- ------ -- -
------------- -- -
-------------------
-- -----
-
-
----- ------- - -
------ - --- --
---------- - --- --
-------- - --- --
-------- - --- -
-
----- ----- - --- ------------
------
--------
----------
--------
-------- -
-- -------
-
--
------ ------- -----在组件中使用 store
在组件中使用 store，需要先导入 store。
import store from '@/store'
获取 State
在组件中获取 State，可以使用计算属性。
-- -------------------- ---- -------
----------
-----
----- ----- ------
----- --------- ------
------
-----------
--------
------ ------- -
--------- -
----- -- -
------ -----------------------
--
--------- -- -
------ -----------------------------
-
-
-
---------修改 State
在组件中修改 State，需要通过 Mutation 或 Action。
-- -------------------- ---- -------
----------
-----
----- ----- ------
------- -----------------------------
------- -----------------------------
------- ----------------------------- ----------
------
-----------
--------
------ ------- -
-------- -
--------- -- -
-------------------------------
--
--------- -- -
-------------------------------
--
-------------- -- -
--------------------------------------
-
-
-
---------在 Module 中使用 store
在 Module 中使用 store，需要在 Module 中定义 State、Getter、Mutation、Action。
-- -------------------- ---- -------
----- ------- - -
------ -
----- ---------
--
---------- -
---------- ------- -------- -
---------- - -------
-
--
-------- -
--------------- -- ------ -- -------- -
------------- -- -
-------------------- --------
-- -----
-
--
-------- -
---------- ----- -- ------------------------
-
-在组件中使用 Module 中的 State、Getter、Mutation、Action，需要在调用时添加 Module 名称前缀。
-- -------------------- ---- -------
----------
-----
----- ----------- ------
------- ------------------------------------- -------------
------- ---------------------------------------------- ------ -------------
----- --------- ------
------
-----------
--------
------ ------- -
--------- -
----------- -- -
------ ------------------------
--
--------- -- -
------ ----------------------------------
-
--
-------- -
---------- ------ -
---------------------------------- -----
--
--------------- ------ -
----------------------------------------- -----
-
-
-
---------总结
Vuex 是一个非常实用的状态管理工具，可以方便地管理单页应用中的状态。在实际项目开发中，合理使用 Vuex 可以提高代码的可维护性和可扩展性。本文介绍了 Vuex 的基本概念和用法，并结合实际项目开发经验进行了实践教程。希望对读者有所帮助。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/660a366fd10417a222981e2e