目录
Vuex 是一个专为 Vue.js 应用程序开发的状态管理模式。它集中管理应用的所有组件的状态,使得状态变更可预测。本文将探讨 Vuex 的设计模式及其核心概念。
Vuex 的核心概念
1. State
State 是 Vuex 存储数据的地方。它是单一数据源,所有组件共享这一状态。
const store = new Vuex.Store({
state: {
count: 0
}
});
2. Getters
Getters 类似于 Vue 的计算属性,用于从 store 中派生出状态。
const getters = {
doubleCount: state => state.count * 2
};
3. Mutations
Mutations 是唯一改变 Vuex store 中状态的方法,且必须是同步函数。
const mutations = {
increment(state) {
state.count++;
}
};
4. Actions
Actions 类似于 mutations,但它们是用于处理异步操作。可以在 actions 中调用 mutations。
const actions = {
incrementAsync({ commit }) {
se