Vuex 3.0：从零开始构建 Vue.js 状态管理系统

随着 Vue.js 3 的到来，整个前端技术界都为之兴奋不已。然而，大多数核心库都还没有跟上它的脚步，包括 Vuex 和 Vue Router。

作为状态管理工具，Vuex 允许我们通过集中管理应用程序的状态来构建更具可维护性和可扩展性的应用程序。同时，它也为我们提供了诸如 mutations 和 actions 等特性来方便地对状态进行修改。

现在，让我们来使用 Vue 3 的新反应式 API 实现自己的 Vuex 吧。为了让事情变得简单，我们将只实现顶级的 state、actions 和 getters，而不会实现 modules、plugins 和 devtools 等更高级的功能。

首先，我们先来定义一个名为 Store 的类，它将作为我们 Vuex 实现的核心：

class Store {
  constructor(options) {
    this.state = reactive(options.state);
    this.actions = options.actions;
    this.getters = options.getters;
  }

  commit(type, payload) {
    this.state[type] = payload;
  }

  dispatch(type, payload) {
    this.actions[type](this, payload);
  }

  get(getterName) {
    return this.getters[getterName](this.state);
  }
}

接着，我们定义一个 useStore 钩子函数，它将用于在我们的组件中注入 Store 实例：

import { inject } from 'vue';

export function useStore() {
  return inject('store');
}

现在，我们就可以在我们的组件中使用 Store 了：

import { useStore } from './useStore';

export default {
  setup() {
    const store = useStore();

    const count = store.get('count');
    const incrementCount = () => store.dispatch('incrementCount');

    return {
      count,
      incrementCount,
    };
  },
};

这就是使用 Vue 3 的新反应式 API 从头开始实现 Vuex 的过程。虽然我们只实现了顶级的 state、actions 和 getters，但这足以让我们在我们的应用程序中进行状态管理了。如果需要更多高级的功能，我们可以随时扩展我们的实现。