在 Vue.js 中，我们常常需要共享一些数据，比如用户信息、语言代码、主题等等。为了方便管理这些数据，我们可以使用 Vuex，一个 Vue.js 的状态管理插件，来进行全局数据的管理。
什么是 Vuex？
Vuex 是一个专为 Vue.js 应用程序开发的状态管理模式。可以帮助我们集中存储和管理应用程序的所有组件的状态（数据）。Vuex 主要包含以下几个部分：
- state：存储数据的地方，即所有组件共享的数据源。
- mutations：修改 state 中数据的操作，只能同步执行。
- actions：类似于 mutations，但是可以异步执行，并通过 mutations 来修改 state 中的数据。
- getters：类似于 state，但是它是用于从 state 中派生出一些新的状态。
在 Vue.js 中使用 Vuex
安装 Vuex
在使用 Vuex 之前，我们需要先安装它。可以使用 npm 进行安装：
npm install vuex --save
创建 store
在使用 Vuex 之前，我们还需要创建一个 store。一个 Vue.js 应用程序通常只有一个 store。在 store 中，我们需要定义一个 state 对象来存放所有组件都需要使用的数据：
-- -------------------- ---- -------
------ --- ---- ------
------ ---- ---- -------
--------------
----- ----- - --- ------------
------ -
--------- -----
--------- -----
------ ----------
--
---
------ ------- ------这里，我们定义了一个名为 store 的 Vuex 实例，并在其中定义了一个 state 对象，用来存放用户信息、语言代码和主题。
使用 store
为了在组件中使用 store 中的数据，我们需要先导入我们刚刚创建好的 store 对象：
import store from './store';
接着，在组件中访问 store 的数据时，需要使用 Vuex 提供的 mapState 工具函数：
-- -------------------- ---- -------
------ --- ---- ------
------ - -------- - ---- -------
------ ------- ------------
--------- ----------
--------- ------- -- ---------------
--------- ------- -- ---------------
------ ------- -- ------------
---
---这里，我们使用了 mapState 工具函数，将 state 中的数据映射到组件的 computed 计算属性中。
修改 store
我们可以在组件中通过提交 mutations 来修改 store 中的数据，然后在 mutations 中修改 state 中的数据。比如，在以下代码中，我们定义了一个 SET_USER_INFO mutation 和一个 updateUserInfo action：
-- -------------------- ---- -------
----- --------- - -
-------------------- --------- -
-------------- - ---------
--
--
----- ------- - -
---------------- ------ -- --------- -
----------------------- ----------
--
--然后，在组件中，我们可以调用 updateUserInfo action 来修改 userInfo：
-- -------------------- ---- -------
------ ----- ---- ----------
------ ------- ------------
-------- -
---------------- -
-------------------------------- ------
--
--
---最后，在 mutations 中修改 state 中的数据：
const mutations = {
SET_USER_INFO(state, userInfo) {
state.userInfo = userInfo;
},
};类似地，我们也可以通过 actions 来修改 store 中的数据。
总结
本文介绍了如何在 Vue.js 应用程序中使用 Vuex 管理全局数据源。通过使用 Vuex，我们可以更好地组织和管理应用程序的数据，使应用程序更具可维护性和可扩展性。如果您想了解更多内容，可以查看 Vuex 官方文档：https://vuex.vuejs.org/zh/。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/65a2611fadd4f0e0ffa84fcf