Vue.js 中使用 store 管理全局数据源-JavaScript中文网-JavaScript教程资源分享门户

在 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 对象来存放所有组件都需要使用的数据：

import Vue from 'vue';
import Vuex from 'vuex';

Vue.use(Vuex);

const store = new Vuex.Store({
  state: {
    userInfo: null,
    langCode: 'en',
    theme: 'default',
  },
});

export default store;

这里，我们定义了一个名为 store 的 Vuex 实例，并在其中定义了一个 state 对象，用来存放用户信息、语言代码和主题。

使用 store

为了在组件中使用 store 中的数据，我们需要先导入我们刚刚创建好的 store 对象：

import store from './store';

接着，在组件中访问 store 的数据时，需要使用 Vuex 提供的 mapState 工具函数：

import Vue from 'vue';
import { mapState } from 'vuex';

export default Vue.extend({
  computed: mapState({
    userInfo: (state) => state.userInfo,
    langCode: (state) => state.langCode,
    theme: (state) => state.theme,
  }),
});

这里，我们使用了 mapState 工具函数，将 state 中的数据映射到组件的 computed 计算属性中。

修改 store

我们可以在组件中通过提交 mutations 来修改 store 中的数据，然后在 mutations 中修改 state 中的数据。比如，在以下代码中，我们定义了一个 SET_USER_INFO mutation 和一个 updateUserInfo action：

const mutations = {
  SET_USER_INFO(state, userInfo) {
    state.userInfo = userInfo;
  },
};

const actions = {
  updateUserInfo({ commit }, userInfo) {
    commit('SET_USER_INFO', userInfo);
  },
};

然后，在组件中，我们可以调用 updateUserInfo action 来修改 userInfo：

import store from './store';

export default Vue.extend({
  methods: {
    updateUser(user) {
      store.dispatch('updateUserInfo', user);
    },
  },
});

最后，在 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

Vue.js 中使用 store 管理全局数据源