一、Vuex 简介
Vuex 是 Vue.js 的状态管理模式和库。它采用集中式存储管理应用的所有组件的状态，并以相应的规则保证状态以一种可预测的方式发生变化。Vuex 的出现解决了组件间共享状态的问题，使得状态管理变得简单、可预测和可维护。
二、Vuex 核心概念
1. State
State 是 Vuex 管理的应用状态对象。Vuex 使用单一状态树，用一个对象就包含了全部的应用层级状态。每个应用将仅仅包含一个 store 实例。
// store.js
const store = new Vuex.Store({
state: {
count: 0
}
});
2. Getters
Getters 是基于 state 的计算属性，用于从 state 中派生出一些状态。
// store.js
const store = new Vuex.Store({
// ...
getters: {
doubleCount: state => state.count * 2
}
});
在组件中使用：
<template>
<div>Double Count: {{ doubleCount }}</div>
</template>
<script>
export default {
computed: {
doubleCount() {
return this.$store.getters.doubleCount;
}
}
};
</script>
3. Mutations
Mutations 是更改 Vuex 中 state 的唯一方法，必须是同步函数。每个 mutation 都有一个字符串的事件类型和一个回调函数，该回调函数就是实际进行状态更改的地方。
// store.js
const store = new Vuex.Store({
// ...
mutations: {
increment(state) {
state.count++;
}
}
});
4. Actions
Actions 类似于 mutations，但它是可以包含任意异步操作的方法。Actions 提交的是 mutations，而不是直接变更 state。
// store.js
const store = new Vuex.Store({
// ...
actions: {
incrementAsync({ commit }) {
setTimeout(() => {
commit('increment');
}, 1000);
}
}
});
在组件中触发action：
<template>
<button @click="incrementAsync">Increment Async</button>
</template>
<script>
export default {
methods: {
incrementAsync() {
this.$store.dispatch('incrementAsync');
}
}
};
</script>
5. Modules
Modules 允许将单一的 Store 分割成多个模块（module）。每个模块拥有自己的 state、mutations、actions、getters 和嵌套子模块。
三、封装 Vuex 为公共组件
为了在多页面之间方便地引用、修改和显示 Vuex 状态，我们可以将 Vuex 的相关逻辑封装为公共组件。
1. 创建 Vuex Store
// store.js
import Vue from 'vue';
import Vuex from 'vuex';
Vue.use(Vuex);
export default new Vuex.Store({
state: {
count: 0
},
mutations: {
increment(state) {
state.count++;
}
}
});
2. 创建公共组件
CountDisplay.vue
<template>
<div>Count: {{ count }}</div>
</template>
<script>
export default {
computed: {
count() {
return this.$store.state.count;
}
}
};
</script>
CountControls.vue
<template>
<div>
<button @click="increment">Increment</button>
</div>
</template>
<script>
export default {
methods: {
increment() {
this.$store.commit('increment');
}
}
};
</script>
3. 在多页面中使用公共组件
在你的 Vue 应用中，你只需要在需要使用这些组件的页面或组件中引入它们即可。
<template>
<div>
<CountDisplay />
<CountControls />
</div>
</template>
<script>
import CountDisplay from './CountDisplay.vue';
import CountControls from './CountControls.vue';
export default {
components: {
CountDisplay,
CountControls
}
};
</script>
四、Vuex 的优势
- 状态管理的规范化：使得状态管理变得简单和直观，避免了多个组件之间共享状态的混乱。
- 可预测性：由于状态变更的规范化，使得状态的变化更加可预测和可调试。
- 组件解耦：通过将状态管理逻辑提取到 Vuex 中，使得组件之间的耦合度降低，提高了组件的可复用性。
五、Vuex 的使用场景
- 中大型单页应用：在状态管理复杂的大型应用中，Vuex 提供了清晰的结构和易于维护的状态管理方案。
- 需要多组件共享状态：当多个组件需要共享或修改同一状态时，Vuex 可以避免组件间的直接通信，使代码更加清晰。
- 与 Vue 开发者工具集成：Vuex 与 Vue 开发者工具紧密集成，方便开发者在开发过程中跟踪和调试状态。
六、类似 Vuex 的组件
- Redux：与 React 配合使用的状态管理库，与 Vuex 类似，也是集中式状态管理方案。
- MobX：一个简单的可扩展的状态管理库，使用可观察对象使得状态管理更加直观和高效。
这些库或框架各有优缺点，开发者可以根据项目需求和技术栈来选择合适的方案。
