什么是 Vuex？
Vuex 是一个专为 Vue.js 应用程序开发的状态管理模式。它采用集中式存储管理应用的所有组件的状态，并以相应的规则保证状态以一种可预测的方式发生变化。
为什么需要 Vuex？
在大型的 Vue.js 应用中，组件之间的状态管理变得越来越复杂，数据流向难以追踪。Vuex 的出现解决了这一问题，它提供了一种集中式的、易于追踪的方式来管理状态。
安装和配置
安装 Vuex 非常简单，只需使用 npm 或 yarn 即可：
npm install vuex@next --save
或者
yarn add vuex@next
接下来，我们需要在项目中配置 Vuex。首先，在 src 目录下创建一个名为 store 的文件夹，然后在其中创建一个 index.js 文件。
创建 Store
在 index.js 中，我们需要定义 store 的基本结构：
-- -------------------- ---- -------
------ - ----------- - ---- ------
------ ------- -------------
------ -
------ -
--
---------- -
--------- ------- -
-------------
-
--
-------- -
--------- -- ------ -- -
-------------------
-
--
-------- -
--------- ----- -- -----------
-
--在主应用中使用 Store
接下来，我们需要将 store 注入到 Vue 实例中。编辑 main.js 文件：
import { createApp } from 'vue'
import App from './App.vue'
import store from './store'
const app = createApp(App)
app.use(store)
app.mount('#app')State
State 是存储状态的地方。在 Vuex 中，我们通过 state 来定义全局状态。
获取 State
可以通过组件中的 this.$store.state 访问全局状态。例如：
export default {
computed: {
count () {
return this.$store.state.count
}
}
}使用 mapState 辅助函数
为了简化代码，可以使用 mapState 辅助函数来映射 state 到组件的计算属性：
-- -------------------- ---- -------
------ - -------- - ---- ------
------ ------- -
--------- -
-------------
-------
--
-
-Mutations
Mutations 用于更改状态，它们必须是同步函数。Mutation 必须通过调用 commit 方法来触发。
定义 Mutation
在 store 中定义 Mutation：
mutations: {
increment (state) {
state.count++
},
decrement (state) {
state.count--
}
}提交 Mutation
提交 Mutation 可以直接通过 commit 方法：
methods: {
increment () {
this.$store.commit('increment')
},
decrement () {
this.$store.commit('decrement')
}
}使用 mapMutations 辅助函数
同样，我们可以使用 mapMutations 辅助函数来简化代码：
-- -------------------- ---- -------
------ - ------------ - ---- ------
------ ------- -
-------- -
-----------------
------------
-----------
--
-
-Actions
Actions 类似于 Mutations，不同之处在于 Actions 提交的是 Mutations 而不是直接变更状态。Actions 可以包含任意异步操作。
定义 Action
在 store 中定义 Action：
actions: {
increment ({ commit }) {
setTimeout(() => {
commit('increment')
}, 1000)
}
}触发 Action
通过 dispatch 方法来触发 Action：
methods: {
async incrementAsync () {
await this.$store.dispatch('increment')
}
}使用 mapActions 辅助函数
同样地，使用 mapActions 辅助函数来简化代码：
-- -------------------- ---- -------
------ - ---------- - ---- ------
------ ------- -
-------- -
---------------
----------------
--
-
-Getters
Getters 用于从 state 中派生出一些状态，类似于 Vue 计算属性。
定义 Getter
在 store 中定义 Getter：
getters: {
getCount: state => state.count
}访问 Getter
通过 this.$store.getters 来访问 Getter：
computed: {
count () {
return this.$store.getters.getCount
}
}使用 mapGetters 辅助函数
使用 mapGetters 辅助函数来简化代码：
-- -------------------- ---- -------
------ - ---------- - ---- ------
------ ------- -
--------- -
---------------
----------
--
-
-模块化
当应用变得越来越大时，单一的 store 对象可能变得难以管理。这时，我们可以使用模块化（Modules）来拆分状态。
创建模块
首先，创建一个新的文件 modules/counter.js：
-- -------------------- ---- -------
----- ----- - -
------ -
-
----- --------- - -
--------- ------- -
-------------
-
-
----- ------- - -
--------- -- ------ -- -
-------------------
-
-
----- ------- - -
--------- ----- -- -----------
-
------ ------- -
----------- -----
------
----------
--------
-------
-注册模块
在 index.js 中注册模块：
-- -------------------- ---- -------
------ --- ---- -----
------ ---- ---- ------
------ ------- ---- -------------------
-------------
------ ------- --- ------------
-------- -
-------
-
--访问模块状态
在组件中访问模块状态：
-- -------------------- ---- -------
------ ------- -
--------- -
---------------------- -
-------
---
------------------------ -
----------
--
-
-结论
通过本章的学习，我们了解了 Vuex 的基本概念以及如何在 Vue3 应用中使用 Vuex 来管理状态。在实际开发中，合理利用 Vuex 的功能可以使我们的应用更加高效、易于维护。下一章我们将进一步探讨 Vuex 的高级用法。
以上内容涵盖了 Vuex 的基础知识，包括安装配置、State、Mutations、Actions、Getters 以及模块化等内容。希望这些内容能够帮助你更好地理解和使用 Vuex。