与 Vuex 说再见，拥抱轻量级 mini-vuex

2023-09-26 06:57:20

轻量级状态管理：使用 Mini-Vuex 构建灵活的应用程序

概述

在 Vue.js 生态系统中，Vuex 作为状态管理解决方案广受推崇。然而，对于小型或中等规模的应用程序来说，它的庞大体积和复杂性往往是一种负担。而 Mini-Vuex 的出现，为我们提供了一个轻量级的选择，能够满足状态管理需求，而无需牺牲灵活性。

什么是 Mini-Vuex？

Mini-Vuex 是一个轻量级的状态管理库，专为小型和中等规模的 Vue.js 应用程序而设计。它遵循 Vuex 的核心概念，但以更精简和易于使用的形式提供。

Mini-Vuex 的核心概念

Mini-Vuex 基于以下核心概念：

Store 类 ：用于管理应用程序状态。它包含两个属性：_state（存储数据）和 _mutations（存储修改 _state 的函数）。
_mutations ：纯粹函数，接收 _state 作为参数，并返回修改后的 _state。

手写 Mini-Vuex

要手写 Mini-Vuex，我们创建一个 Store 类，该类定义了存储和管理状态的方法。以下是 Store 类的简化示例：

class Store {
  constructor() {
    this._state = {};
    this._mutations = {};
  }
  getState() {
    return this._state;
  }
  commit(mutation, payload) {
    if (!this._mutations[mutation]) {
      throw new Error(`Mutation ${mutation} not found.`);
    }
    this._state = this._mutations[mutation](this._state, payload);
  }
}

使用 Mini-Vuex

使用 Mini-Vuex 非常简单：

创建一个 Store 实例。
注册 _mutations。
在需要时使用 commit 方法提交 _mutations。

例如，创建一个管理购物车状态的 Mini-Vuex：

const store = new Store();

// 注册 _mutations
store._mutations = {
  addItem(state, item) {
    state.items.push(item);
    return state;
  },
  removeItem(state, item) {
    state.items = state.items.filter(i => i !== item);
    return state;
  }
};

// 使用 _mutations
store.commit('addItem', { name: 'Apple', price: 10 });
store.commit('removeItem', { name: 'Orange' });

与 Vuex 的比较

与 Vuex 相比，Mini-Vuex 具有以下优点：