Vue.js 是一款流行的 JavaScript 框架，广泛用于构建单页面应用程序（SPA）。在一个 SPA 中，所有的数据都保存在状态管理器中，并且这些数据可以在任何地方被访问和修改。Vuex 是 Vue.js 框架提供的官方状态管理器，它实现了 Vue.js 应用程序中的全局数据管理。
在这篇文章中，我们将介绍如何在 Vue.js SPA 应用程序中使用 Vuex 实现全局数据管理。我们将使用一个示例代码来演示这个强大功能。这篇文章适合有 Vue.js 基础知识的前端开发者。
Vuex 是什么？
Vuex 是一个状态管理器，它为 Vue.js 应用程序提供了全局数据管理。它的主要目标是让数据在应用程序的所有组件中共享和使用。它实现了以下功能：
- 集中化存储应用程序的所有组件的状态
- 规定了当组件想要修改状态时可操作的方式
- 规定了如何将状态变化通知给应用程序的所有组件
Vuex 的状态管理是单向数据流，类似于 React.js。当组件想要修改状态时，通过派发一个事件（action）来告诉 Vuex 要修改的状态，并且同时传递一个负载数据（payload）。Vuex 的管理器处理事件，调用一个或多个 mutations 来修改状态。mutations 就像 Vuex 的本地事件处理程序，它们定义了如何更新状态，并且每个 mutation 都有一个字符串类型的事件类型和一个回调函数。当状态发生变化时，Vuex 的订阅者就会被通知。
如何使用 Vuex？
使用 Vuex 首先需要在 Vue.js 应用程序中安装它。你可以从 NPM 安装 Vuex：
npm install vuex --save
在安装完成后，你可以将 Vuex 引入到应用程序中：
import Vue from 'vue' import Vuex from 'vuex' Vue.use(Vuex)
然后，你需要定义一个 Vuex 的状态对象。Vuex 的状态对象是一个 JavaScript 对象，它包含了应用程序所有组件的共享状态。你可以将状态对象定义在一个 js 文件中，并在应用程序中引用它：
// store.js
export default new Vuex.Store({
state: {
count: 0
}
});在应用程序中引用状态对象：
import store from './store.js';
在组件中使用状态：
computed: {
count: function() {
return store.state.count;
}
}当组件想要修改状态时，可以通过 Vuex 的 mutations 来实现。mutations 是一个函数，它接收一个状态对象和一个负载数据：
mutations: {
increment(state, payload) {
state.count += payload.amount;
}
}在组件中提交 mutations：
methods: {
addToCount: function(amount) {
store.commit('increment', {
amount: amount
});
}
}示例代码
下面我们来看一个简单的示例代码，演示如何使用 Vuex 在 Vue.js SPA 应用程序中实现全局数据管理。我们将创建一个简单的应用程序，它包括一个计数器和两个组件，一个组件显示计数器的值，另一个组件用于修改计数器的值。
创建一个计数器
首先，我们需要在状态中定义一个计数器：
// store.js
export default new Vuex.Store({
state: {
count: 0
}
});然后，我们需要创建一个组件，它显示计数器的值：
-- -------------------- ---- -------
----------
------- ----- --------
-----------
--------
------ ----- ---- -------------
------ ------- -
--------- -
------ ---------- -
------ ------------------
-
-
-
---------修改计数器的值
接下来，我们需要创建一个组件，它用于修改计数器的值：
-- -------------------- ---- -------
----------
-----
------- ------------------- ------------
------- -------------------- -------------
------
-----------
--------
------ ----- ---- -------------
------ ------- -
-------- -
------- ---------- -
------------------------- -
------- -
---
--
-------- ---------- -
------------------------- -
------- -
---
-
-
-
---------我们在组件中定义了两个方法，addOne 和 addFive，它们分别将计数器的值增加1和5。当这些方法被调用时，它们通过 Vuex 的 commit 方法来派发一个指定的事件（mutation）以使得能修改状态。我们的事件类型是 increment，这是我们定义的一个 mutations，用于增加计数器的值。
-- -------------------- ---- -------
-- --------
------ ------- --- ------------
------ -
------ --
--
---------- -
---------------- -------- -
----------- -- ---------------
-
-
--现在我们已经准备好了所有的代码，将启动应用程序并将两个组件渲染在页面上。这样我们就可以点击添加按钮来增加计数器的值了。
-- -------------------- ---- -------
----------
-----
----------
---------------
------
-----------
--------
------ ------- ---- ---------------
------ ------------ ---- --------------------
------ ------- -
----------- -
--------
------------
-
-
---------总结
这篇文章介绍了如何在 Vue.js SPA 应用程序中使用 Vuex 实现全局数据管理，从而让组件共享和操作数据。我们演示了计数器示例代码，其中包含了显示和修改计数器值的两个组件。通过示例代码，我们也学习到了如何在应用程序中使用 Vuex 的 state、mutations 和 commit 方法。在你的Vue.js应用程序中使用Vuex将大大提高你的开发效率和应用程序的可维护性。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/64b257f748841e9894e97fd0