使用 100 行代码实现一个简易 vuex

前端

2023-09-25 03:36:38

在构建大型、复杂的应用程序时，状态管理成为一项至关重要的任务。Vuex 是一个流行的 Vue.js 状态管理库，但其相对复杂的实现让人望而生畏。本文将提供一种使用不到 100 行代码实现简易 vuex 的方法。

引言

状态管理是构建大型 Vue.js 应用程序时不可或缺的部分。它允许我们集中管理应用程序的状态，使其更容易维护和可预测。

Vuex 是一个流行的 Vue.js 状态管理库，但它可能过于复杂，不适用于小型或中型的应用程序。为了解决这个问题，本文将介绍一种使用不到 100 行代码实现轻量级 vuex 的方法。

简易 vuex 的实现

我们的简易 vuex 将包含以下核心功能：

状态对象
变更状态的提交函数
获取状态的 getter 函数

状态对象

状态对象将存储应用程序的数据。我们可以使用一个简单的对象来表示它：

const state = {
  count: 0
};

提交函数

提交函数用于更改状态。它们接受一个 mutation 名称和有效载荷（如果有的话）作为参数：

const commit = (mutation, payload) => {
  // 根据 mutation 名称执行不同的操作
  switch (mutation) {
    case 'INCREMENT':
      state.count++;
      break;
    case 'DECREMENT':
      state.count--;
      break;
  }
};

Getter 函数

Getter 函数用于获取状态。它们接受一个 getter 名称和有效载荷（如果有的话）作为参数：

const getters = {
  getCount: state => state.count
};

使用简易 vuex

现在我们已经定义了我们的简易 vuex，我们可以使用它来管理应用程序的状态：

// 在 Vue 组件中
export default {
  computed: {
    count() {
      return this.$store.getters.getCount;
    }
  },
  methods: {
    increment() {
      this.$store.commit('INCREMENT');
    },
    decrement() {
      this.$store.commit('DECREMENT');
    }
  }
};