自己动手写一个 Vuex (一)：深入理解状态管理

前端

2023-10-26 16:35:53

Vuex：管理 Vue.js 应用程序状态的神兵利器

什么是 Vuex？

在 Vue.js 开发的世界中，状态管理至关重要。Vuex 是 Vue.js 的官方状态管理库，它提供了一个集中式存储，使您可以轻松地管理组件之间的共享状态。Vuex 允许您以可预测的方式修改状态，并促进组件之间的顺畅通信。

Vuex 的优势

使用 Vuex 可以解决以下常见问题：

组件之间的状态共享： Vuex 允许您轻松地在组件之间共享数据，而无需传递繁琐的 props。
状态的集中管理： Vuex 将应用程序状态集中在一个地方，使您能够轻松地跟踪和维护它。
可预测的状态变化： Vuex 提供了一种可预测的方式来修改应用程序状态，简化了调试和维护。

手把手构建一个简单的状态管理器

为了加深对 Vuex 运作原理的理解，让我们尝试自己编写一个简化的状态管理器。它将具有以下功能：

存储应用程序状态
提供获取和设置状态的方法
允许监听状态变化

首先，我们创建一个 Store 类作为我们的状态管理器：

class Store {
  constructor(options) {
    this._state = options.state;
    this._mutations = options.mutations;
    this._actions = options.actions;
    this._getters = options.getters;
  }
  getState() { return this._state; }
  commit(type, payload) { const mutation = this._mutations[type]; if (!mutation) throw new Error(`Mutation ${type} does not exist`); mutation(this._state, payload); }
  dispatch(type, payload) { const action = this._actions[type]; if (!action) throw new Error(`Action ${type} does not exist`); action(this, payload); }
  getters(type) { const getter = this._getters[type]; if (!getter) throw new Error(`Getter ${type} does not exist`); return getter(this._state); }
}

接下来，定义一个存储应用程序状态的 state 对象：

const state = { count: 0 };

然后，定义一个 mutations 对象，包含应用程序状态的修改方法：

const mutations = {
  increment(state, payload) { state.count += payload; },
  decrement(state, payload) { state.count -= payload; },
};

接下来，定义一个 actions 对象，包含应用程序状态的异步修改方法：

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

最后，定义一个 getters 对象，包含应用程序状态的获取方法：

const getters = { getCount(state) { return state.count; } };

现在，我们可以使用我们的状态管理器：

const store = new Store({ state, mutations, actions, getters });
store.commit('increment', 1);
console.log(store.getters('getCount')); // 1
store.dispatch('incrementAsync', 2);
setTimeout(() => console.log(store.getters('getCount')), 1000); // 3