手摸手写个简易 Vuex 3

掌握简易 Vuex 3：从头开始的实践指南

作为 Vue 生态系统的重要组成部分，Vuex 扮演着状态管理的关键角色。尽管 Vuex 3 引入了重大的变化，但掌握其基础对于构建健壮的 Vue 应用至关重要。在本指南中，我们将从头开始探讨 Vuex 3 的基本原理，并逐步构建一个简易的状态管理解决方案。

Vuex 的核心概念

Vuex 的核心思想是集中管理应用状态，以便在整个组件树中访问和更新。它遵循单一状态树的概念，该树由模块化状态切片组成，这些切片可以独立管理和更新。

初始化 Vuex 3

为了初始化 Vuex 3，需要在 Vue 实例中引入 Vuex 模块。可以将其视为将 Vuex 功能注入应用程序的桥梁。

import Vue from 'vue'
import Vuex from 'vuex'

Vue.use(Vuex)

export default new Vuex.Store({
  // 定义状态树和操作
})

定义状态树

状态树代表应用程序的整体状态。它是一个由键值对组成的 JavaScript 对象，其中键表示状态属性，而值表示相应的状态值。

state: {
  count: 0,
  todos: []
}

实施操作

操作是改变状态树中状态的函数。它们只能通过提交突变来更新状态，突变是唯一可以更改状态的授权方法。操作通常用于异步操作或其他需要复杂计算的情况。

mutations: {
  increment (state) {
    state.count++
  }
}

触发操作

可以使用 store.commit() 方法从组件或其他地方触发操作。它接收突变名称和有效载荷（如果需要）作为参数。

this.$store.commit('increment')

访问状态

可以在组件中使用 mapState 辅助函数将状态映射到计算属性，从而访问状态。这允许以响应式的方式获取状态，并且随着状态的变化而更新组件。

computed: {
  ...mapState(['count'])
}

构建一个简易的 Vuex 3 应用

为了巩固这些概念，我们构建一个简易的 Vuex 3 应用，用于管理待办事项列表。

组件

<template>
  <div>
    <input v-model="newTodo">
    <button @click="addTodo">Add</button>
    <ul>
      <li v-for="todo in todos" :key="todo.id">{{ todo.text }}</li>
    </ul>
  </div>
</template>

<script>
import { mapState, mapMutations } from 'vuex'

export default {
  computed: {
    ...mapState(['todos']),
    ...mapMutations(['addTodo'])
  },
  methods: {
    addTodo () {
      this.addTodo({
        id: Date.now(),
        text: this.newTodo
      })
      this.newTodo = ''
    }
  }
}
</script>

Vuex Store

export default new Vuex.Store({
  state: {
    todos: []
  },
  mutations: {
    addTodo (state, todo) {
      state.todos.push(todo)
    }
  }
})

结论

本指南提供了 Vuex 3 基本原理的概述，并展示了如何构建一个简易的 Vuex 3 应用。通过掌握这些核心概念，您可以利用 Vuex 的强大功能来管理应用程序状态，构建健壮且响应迅速的 Vue 应用。