Vuex 的基本概念
Vuex 是一个专为 Vue.js 应用程序开发的状态管理模式。它采用集中式存储管理应用的所有组件的状态，并以相应的规则保证状态以一种可预测的方式发生变化。
状态 (State)
状态是应用中所有数据的集合，这些数据可以通过 state 对象来表示。在 Vuex 中，我们通过 store.state 来访问这些状态。
----- ----- - --- ------------
------ -
------ -
-
--提交 mutation
mutation 是改变状态的唯一方式。每个 mutation 都有一个字符串的事件类型 (type) 和一个回调函数 (handler)。这个回调函数就是实际进行状态更改的地方，并且它会接受 state 作为第一个参数：
----- ----- - --- ------------
------ -
------ -
--
---------- -
--------- ------- -
-------------
-
-
--组件提交 mutation：
-------------------------------
分发 Action
Action 类似于 mutation，不同在于：
- Action 提交的是 mutation，而不是直接变更状态。
- Action 可以包含任意异步操作。
----- ----- - --- ------------
------ -
------ -
--
---------- -
--------- ------- -
-------------
-
--
-------- -
--------- -- ------ -- -
-------------------
-
-
--组件分发 action：
---------------------------------
Getter
Getter 用来从 store 中的 state 获取值，就像计算属性一样。getter 也可以依赖其他 getter：
----- ----- - --- ------------
------ -
------ -
- --- -- ----- ------ ----- ---- --
- --- -- ----- ------ ----- ----- -
-
--
-------- -
---------- ----- -- -
------ ----------------------- -- ----------
-
-
--组件获取 getter：
--------- -
---------------
-----------
--
-组合式 API
组合式 API（Composition API）是 Vue 3 引入的新特性，它允许开发者使用更灵活的方式来组织代码逻辑，尤其是在处理复杂组件时。
基本用法
使用组合式 API 之前需要引入 setup 函数：
------ - --- - ---- -----
------ ------- -
------- -
----- ----- - ------
-------- ----------- -
-------------
-
------ -
------
---------
-
-
-在模板中可以像这样使用：
----------
-----
----- ----- ------
------- -------------------------------------
------
-----------使用 Vuex 与组合式 API
在 Vue 3 中，我们可以通过 useStore 函数来访问 Vuex store，并使用组合式 API 来处理状态。
定义 Store
首先，我们需要定义一个 Vuex store：
------ - ----------- - ---- ------
------ ------- -------------
------ -
------ -
--
---------- -
---------------- -
-------------
-
--
-------- -
----------- ------ -- -
-------------------
-
-
--在组件中使用
接下来，在组件中使用组合式 API 来访问和修改 store 中的状态：
------ - ---- -------- - ---- -----
------ - -------- - ---- ------
------ ------- -
------- -
----- ----- - ----------
----- ----- - ----------- -- ------------------
-------- ----------- -
---------------------------
-
------ -
------
---------
-
-
-这样我们就成功地将组合式 API 与 Vuex 结合起来，从而更好地管理应用的状态。
模块化 Store
在大型应用中，为了更好地管理状态，我们可以将 store 划分为多个模块。
创建模块
首先，创建一个模块文件 modules/todos.js：
----- ----- - -
------ --
-
----- --------- - -
-------------- ----- -
----------------------
-
-
----- ------- - -
--------- ------ -- ----- -
----------------- -----
-
-
----- ------- - -
---------- ----- -- -
------ ----------------------- -- ----------
-
-
------ ------- -
------
----------
--------
-------
-注册模块
然后在主 store 文件中注册该模块：
------ - ----------- - ---- ------
------ ----- ---- -----------------
------ ------- -------------
-------- -
-----
-
--访问模块状态
在组件中，我们可以使用 useStore 来访问模块状态：
------ - ---- -------- - ---- -----
------ - -------- - ---- ------
------ ------- -
------- -
----- ----- - ----------
----- --------- - ----------- -- ---------------------------------
-------- ------------- -
------------------------------- -----
-
------ -
----------
-------
-
-
-这样就可以很好地管理和扩展应用的状态了。
总结
本章介绍了如何在 Vue 3 中使用 Vuex 管理应用状态，并结合组合式 API 来编写更简洁、更易维护的代码。希望读者能够通过学习这些内容，更好地理解和运用 Vuex 和组合式 API 来构建高效、健壮的前端应用。