从零构建：一个轻量级的 Vuex 实现

从零手写实现一个mini-Vuex

前言

Vuex 是 Vue.js 生态系统中用于管理应用程序状态的流行库。它提供了集中的状态存储、状态变更和模块化等功能。为了巩固对 Vuex 源码的理解，我们着手从零实现一个轻量级的 mini-Vuex，专注于其核心的数据存储功能。

构建 mini-Vuex

1. 状态存储

mini-Vuex 的核心是状态存储。我们创建一个 Store 类，该类将状态存储在一个响应式对象 state 中。state 可以通过 this.state 访问。

class Store {
  constructor(options) {
    this.state = new Vue({
      data() {
        return options.state;
      }
    });
  }
}

2. 获取状态

为了从组件中获取状态，我们创建了一个 mapState 函数。它返回一个对象，其中包含组件所需的状态属性。

const mapState = (mapStateToProps) => {
  return (context) => {
    return computed(() => {
      return mapStateToProps(context.state);
    });
  };
};

3. 提交变更

状态变更通过提交 mutation 来实现。mutation 是简单的函数，它们直接修改状态。我们定义一个 commit 方法来提交变更。

commit(type, payload) {
  this.mutations[type].forEach((mutation) => {
    mutation(this.state, payload);
  });
}

4. 模块化

为了支持模块化，我们创建一个 Module 类，它将状态、变更和 getters 封装在一个单独的模块中。

class Module {
  constructor(moduleOptions) {
    this.state = moduleOptions.state || {};
    this.mutations = moduleOptions.mutations || {};
    this.getters = moduleOptions.getters || {};
  }
}

整合到 Vue.js

要将 mini-Vuex 集成到 Vue.js 组件中，可以使用 useStore 函数。它返回对 Store 实例的访问。

const useStore = () => {
  return inject('store');
};

示例

让我们通过一个示例来说明如何使用 mini-Vuex。假设我们有一个购物车的应用程序。

// store.js
const store = new Store({
  state: {
    cart: []
  },
  mutations: {
    addToCart(state, product) {
      state.cart.push(product);
    }
  }
});

// component.vue
import { useStore, mapState } from 'mini-vuex';

export default {
  setup() {
    const store = useStore();
    const cart = mapState((state) => state.cart);

    return {
      cart
    };
  }
};

在上面的示例中，我们创建了一个状态存储，其中包含一个包含购物车项目数组的 cart 状态。我们定义了一个 addToCart 变更，它将新产品添加到购物车中。在组件中，我们使用 useStore 获取对 Store 实例的访问，并使用 mapState 映射所需的 cart 状态属性。

结论

通过从零实现一个 mini-Vuex，我们深入了解了 Vuex 的核心概念。我们学习了如何存储和管理状态、提交变更以及支持模块化。通过掌握这些基本原理，我们可以有效地在自己的 Vue.js 项目中应用状态管理。