手写一个mini版Vuex3——告别繁琐，拥抱极简！

在快节奏的编程世界中，效率至关重要。Vuex，作为Vue.js生态系统中的状态管理工具，因其复杂性和冗长而备受诟病。但别担心，让我们踏上一个精简之旅，打造一个轻量级的Vuex3版本，告别繁琐，拥抱极简！

Vuex3的痛点

回顾Vuex2，我们不得不面对臃肿的代码和繁琐的模块配置。Vuex3虽然进行了优化，但在模块化和复杂性方面仍存在不足。手写一个mini版Vuex3，可以规避这些痛点，让我们专注于核心功能。

精简的核心

我们的mini版Vuex3将保留三个核心元素：

• Store： 状态容器，存储应用程序状态。
• Commit： 提交状态更改。
• Getters： 从状态派生计算属性。

手把手构建

Store的实现

class Store {
  constructor(state) {
    this.state = state;
  }

  commit(mutation, payload) {
    if (typeof mutation === 'function') {
      mutation(this.state, payload);
    } else if (typeof mutation === 'string') {
      const handler = this.mutations[mutation];
      if (handler) {
        handler(this.state, payload);
      }
    }
  }

  getter(getterName) {
    const getter = this.getters[getterName];
    if (getter) {
      return getter(this.state);
    }
  }
}

Mutations的实现

const mutations = {
  add(state, payload) {
    state.count += payload;
  },
  remove(state, payload) {
    state.count -= payload;
  },
};

Getters的实现

const getters = {
  doubledCount(state) {
    return state.count * 2;
  },
};

示例用法

const store = new Store({ count: 0 });

store.commit('add', 5);
console.log(store.getter('doubledCount')); // 10

总结

通过手写一个mini版Vuex3，我们剥离了冗余，只保留了状态管理的核心功能。这个轻量级的解决方案让我们可以轻松地实现状态管理，同时提升了开发效率。摆脱复杂性，拥抱极简！