从基础到原理：手写mini-vuex，让状态管理彻底了然于心

前端

2023-11-22 05:33:40

前言

Vuex是一个专为Vue.js应用程序开发的状态管理库。它允许您以集中式的方式管理应用程序的状态，并在组件之间共享。使用Vuex可以帮助您构建更具可维护性和可扩展性的应用程序。

Vuex工作原理

Vuex中的核心概念是store。store是一个包含应用程序状态的全局对象。组件可以通过mapState和mapMutations等方法访问store中的状态和修改器。

Vuex中还定义了另外两个重要概念：action和mutation。action是触发mutation的函数。mutation是唯一可以直接修改store中状态的方法。

手写mini-vuex

现在，我们将一步一步手写一个mini-vuex。

首先，我们需要定义一个store类。store类将包含应用程序的状态、action和mutation。

class Store {
  constructor(state) {
    this.state = 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);
  }
}

接下来，我们需要定义一些mutation。mutation是唯一可以直接修改store中状态的方法。

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

然后，我们需要定义一些action。action是触发mutation的函数。

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

最后，我们需要在组件中使用我们的store。

import { mapState, mapMutations } from 'mini-vuex';

export default {
  computed: {
    ...mapState(['count']),
  },
  methods: {
    ...mapMutations(['increment', 'decrement']),
  },
};