vue中的vuex详解

一、引言

Vuex 是 Vue.js 的官方状态管理模式和库，它采用集中式存储管理应用的所有组件的状态，并以相应的规则保证状态以一种可预测的方式发生变化。在开发大型单页应用时，组件间的状态共享和数据传递变得复杂，Vuex 提供了一种集中管理状态的解决方案。

二、Vuex 的核心概念

1、State

State 是 Vuex 存储所有状态的仓库，可以认为是应用的数据中心。任何组件都可以访问和修改 State 中的数据。

1.1、定义 State

import Vue from 'vue';
import Vuex from 'vuex';Vue.use(Vuex);export default new Vuex.Store({state: {count: 0}
});

1.2、访问 State

在组件中可以通过 this.$store.state 访问 State 中的数据。

2、Mutation

Mutation 是同步函数，用于更改 Vuex 的 store 中的状态。每个 mutation 都有一个字符串的事件类型 (type) 和一个回调函数 (handler)。

2.1、定义 Mutation

const mutations = {increment(state) {state.count++;}
};

2.2、提交 Mutation

在组件中通过 this.$store.commit('mutation类型') 提交 mutation。

3、Action

Action 类似于 Mutation，但 Action 提供了执行异步操作的方法。

3.1、定义 Action

const actions = {incrementAsync({ commit }) {setTimeout(() => {commit('increment');}, 1000);}
};

3.2、分发 Action

在组件中通过 this.$store.dispatch('action类型') 分发 action。

4、Getter

Getter 允许组件从 Vuex store 中获取数据，类似于组件中的 computed 属性。

4.1、定义 Getter

const getters = {doubleCount(state) {return state.count * 2;}
};

4.2、使用 Getter

在组件中可以通过 this.$store.getters 访问 getter。

5、Module

Module 允许将 store 分割成模块，每个模块拥有自己的 state、mutation、action、getter。

5.1、定义 Module

const moduleA = {state: { ... },mutations: { ... },actions: { ... },getters: { ... }
};export default new Vuex.Store({modules: {moduleA}
});

三、安装和配置 Vuex

1、安装 Vuex

对于 Vue 3，使用以下命令安装 Vuex：

npm install vuex@4 --save

2、配置 Vuex

在项目中创建一个 store 文件夹，并在其中创建 index.js 文件进行 Vuex 的配置。

import Vue from 'vue';
import Vuex from 'vuex';Vue.use(Vuex);export default new Vuex.Store({state: {// 定义状态},mutations: {// 定义同步修改状态的方法},actions: {// 定义异步修改状态的方法},getters: {// 定义获取状态的方法},modules: {// 定义模块}
});

在 main.js 中引入并使用 store：

import Vue from 'vue';
import App from './App.vue';
import store from './store';new Vue({el: '#app',render: h => h(App),store
});

四、总结

Vuex 是 Vue.js 应用程序的状态管理模式和库，它通过集中式存储管理应用的所有组件的状态，使得状态的变更变得可预测。通过 State、Mutation、Action、Getter 和 Module 等核心概念，Vuex 为开发大型单页应用提供了强大的状态管理能力。

---

版权声明：本博客内容为原创，转载请保留原文链接及作者信息。

参考文章：

• Vuex详解，一文彻底搞懂Vuex-CSDN博客
• 【Vue系列】vuex详解，一篇彻底搞懂vuex_vue vuex-CSDN博客