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