前言
在现今的前端开发中，构建大型应用程序时，应用程序的状态管理变得越来越关键。传统的单向数据流会有一些瓶颈，它会增加应用的复杂度，例如组件之间的通讯和复杂的异步操作。随着 Vue.js 的诞生，它带来的 Vuex 状态管理模式也为应用程序的状态管理提供了一种新的解决方案。本文将介绍 Vuex 状态管理模式的详细解释，并且使用一个实例说明如何在应用程序中使用 Vuex。
什么是 Vuex？
Vuex 是一个专为 Vue.js 应用程序开发的状态管理模式。它采用集中式存储管理应用的所有组件的状态，并以相应的规则保证状态以一种可预测的方式发生变化，具有以下核心概念：
- state（状态）：存储数据，即组件共享的数据源；
- mutations（变更）：执行操作，用于修改 state 状态；
- actions（动作）：封装异步操作，提交 mutations；
- getters（获取器）：派生 state，将 state 映射到视图。
为什么要使用 Vuex？
在 Vue.js 应用程序中，组件间的数据共享和状态管理是一个必不可少的问题。围绕这个问题，由于多个组件都使用同一数据源进行操作，不同的解决方案会带来不同的问题。例如，全局事件总线、props 和 $emit、$parent 和 $children 等等。
而作为一个专门为 Vue.js 应用程序开发的状态管理模式，Vuex 具备以下优点：
- 易于管理：Vuex 的中心化存储管理模式增加了对应用程序状态的可控性；
- 可预测的：Vuex 强制所有状态被管理在一个地方，使得状态变化的流程更加规范；
- 组件间透明：Vuex 不依赖于组件，将状态存储在一个全局的对象中，使得数据共享更加方便；
- 开发调试友好：Vuex 的严格模式保证了状态变化的可跟踪，便于应用程序的开发调试。
Vuex 简单实例
下面展示一个简单的 Vuex 实例，它包含了一个数据源 count 和两个操作。一个是增加计数器的操作 increment，另一个是减少计数器的操作 decrement。下面是简单的实现：
-- -------------------- ---- -------
------ ---- ---- -------
------ --- ---- ------
-- ------ --- --- -
--------------
-- ---- ----------------------- - -------
----- ----- - -
------ -
--
----- --------- - -
--------- ------- - -- -----
--------------
--
--------- ------- - -- -----
--------------
-
--
----- ------- - -
---------- -- ------ -- -- - -- -- --- ----
--------------------
--
---------- -- ------ -- -- -
--------------------
-
--
----- ------- - -
------ ----- -- ----------- -- -------
--
-- ---- ---- --
----- ----- - --- ------------
------ -- ----
---------- -- ------
-------- -- ----
------- -- -----
---
-- ---- ----- --
------ ------- ------在安装和创建 Vuex 实例后，就可以在应用的任意组件中使用 this.$store 来调用状态管理中心进行数据操作：
<template>
<div>
<h1>{{ $store.getters.count }}</h1>
<button @click="$store.dispatch('increment')">增加计数器</button>
<button @click="$store.dispatch('decrement')">减少计数器</button>
</div>
</template>这里的 getters 方法用来获取当前数据源 count 的值。
Vuex 中的存储状态
在 Vuex 的世界中，主要有两种状态：
- Store 状态（存储状态）：即 Vuex 中的
State，是 Vue 组件中 data 或 props 的替代品。所有存储在 Vuex 中的状态都应该是响应式的。 - 组件状态：即 Vue 组件实例中的状态
data、props或者computed。
Vuex 的主要作用就是将应用程序中的状态提升到全局层面。
在 Vuex 中修改状态（mutations）
状态的可变性非常重要，在 Vuex 应用程序中，不能直接改变状态中的数据，而是通过修改 mutations 中的方法来改变 Vuex 中的状态。
Vuex 中的 mutations 有以下特点：
- 显式接收 state：Vuex 中的 mutations 对象定义的方法应该显式接收 state，把它作为第一个参数。在 mutation 中修改状态的时候，最好是修改 state，而不是直接覆盖它。
- 唯一可修改状态的地方：Vuex 中的 mutations 是唯一修改状态的地方，这使得代码变得更容易推导开发人员的共同意图，也更容易使用工具完整地跟踪变更记录。
// mutations
const mutations = {
increment(state, payload) {
// 变更状态
state.count += payload.amount;
}
}在 Vuex 中提交 Mutation（Actions）
Mutation 操作是 Vuex 中修改状态最简单和推荐的方法，但是 Mutation 操作不能包含异步操作，包含异步操作必须使用 Actions 操作。 Vuex Actions 与 Mutation 不同的地方是：
1、Actions 函数接收一个 context 对象，该对象包含：
- dispatch：Action 函数内部执行 dispatch，提交 Mutation。
- commit：Action 函数内部执行 commit，提交 Mutation。
- state：获取当前 Vuex 的 state。
2、Actions 特性使得你可以：
- 包含异步操作。
- 有条件地提交一个或多个 Mutation。
- 以返回值响应操作结果。
// actions
const actions = {
incrementAsync({ commit }, payload) {
setTimeout(() => {
commit('increment', payload); // 提交 Mutation
}, 1000);
}
}在 Vuex 中获取 State（Getters）
Getter 就是按需从 store 中提取状态，当到达 store 状态的变化时，仅会重新计算被依赖的 Getter，而不是计算所有 Getter。
Getter 函数接收 state 作为第一个参数，并且每一个 getter 都会暴露一些计算属性的值。
// getters
const getters = {
doubleCount(state) {
return state.count * 2;
}
}Vuex 严格模式
严格模式是在开发过程中有效的一个功能。在应用程序运行时，任何对 store 状态的修改都应该通过 mutation 函数完成，如果不通过 mutation 函数完成状态的修改，那么 当开启严格模式后，将会抛出一个错误，有助于开发人员快速定位问题。
const store = new Vuex.Store({
//...
strict: process.env.NODE_ENV !== 'production' // 开启严格模式
})总结
通过本文，您已经了解了 Vuex 的使用方法，以及为什么可以在 Vue.js 应用程序中使用 Vuex。Vuex 管理着应用程序中的状态，这使我们更容易跟踪和管理 Vue.js 应用程序状态的变化和维护，同时也有助于更好地组织应用程序结构。随着你的熟练程度持续提高，你将能够有效地应用 Vuex 状态管理的各种知识，构建更加健壮和可靠的大型应用程序。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/649bfa6348841e98948bdba7