1. 什么是 Vuex？
Vuex 是 Vue.js 官方提供的一个状态管理模式，专门用于管理 Vue 应用的全局状态。它提供了集中式存储，并通过特定的规则来确保状态的可预测性。
在大型 Vue 应用中，组件之间的通信可能会变得复杂，而 Vuex 通过提供一个全局的 Store，使得状态的管理变得更加直观和可维护。
2. Vuex 的核心概念
Vuex 主要由以下几个核心模块组成：
(1) State（状态）
State 是 Vuex 的核心部分，它存储了应用的所有全局状态。
const state = {
count: 0
};
(2) Getters（获取器）
Getters 用于从 Store 中派生出一些状态，类似于 Vue 组件中的计算属性。
const getters = {
doubleCount: state => state.count * 2
};
(3) Mutations（变更）
Mutations 是唯一允许修改 State 的方法，它必须是同步函数。
const mutations = {
increment(state) {
state.count++;
}
};
(4) Actions（动作）
Actions 与 Mutations 类似，但它们可以包含异步操作。
const actions = {
asyncIncrement({ commit }) {
setTimeout(() => {
commit('increment');
}, 1000);
}
};
(5) Modules（模块）
当应用变得复杂时，可以将 Vuex Store 拆分为多个模块。
const moduleA = {
state: { name: 'ModuleA' },
mutations: {},
actions: {},
getters: {}
};
const store = new Vuex.Store({
modules: {
a: moduleA
}
});
3. Vuex 的使用示例
(1) 安装 Vuex
npm install vuex --save
(2) 在 Vue 项目中使用 Vuex
import Vue from 'vue';
import Vuex from 'vuex';
Vue.use(Vuex);
const store = new Vuex.Store({
state: {
count: 0
},
mutations: {
increment(state) {
state.count++;
}
},
actions: {
asyncIncrement({ commit }) {
setTimeout(() => {
commit('increment');
}, 1000);
}
}
});
new Vue({
store,
render: h => h(App)
}).$mount('#app');
(3) 在组件中使用 Vuex
<template>
<div>
<p>Count: {{ count }}</p>
<button @click="increment">Increment</button>
</div>
</template>
<script>
import { mapState, mapMutations } from 'vuex';
export default {
computed: {
...mapState(['count'])
},
methods: {
...mapMutations(['increment'])
}
};
</script>
4. Vuex 与 Pinia 的对比
Vuex 在 Vue 2 和 Vue 3 中都可以使用，但 Vue 3 推荐使用更轻量级的 Pinia 作为状态管理工具。相比 Vuex，Pinia 具有更简单的 API 和更好的 TypeScript 支持。
