Vuex 权威指南：剖析原理，轻松入门

2023-01-09 20:21:59

Vuex：掌握数据管理的艺术

Vuex 是 Vue.js 生态系统中的中流砥柱，它是一个状态管理库，旨在简化和高效地处理应用程序状态。它遵循集中式状态管理原则，将应用程序的状态存储在称为 "store" 的单一对象中。这种方法使状态修改易于跟踪和控制，从而提升了代码的可维护性和可测试性。

下载和安装：轻而易举

下载

使用 npm 管理器安装 Vuex 只需一个命令：

npm install vuex

安装

在项目的 main.js 文件中，导入 Vuex 并创建 store 实例：

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

Vue.use(Vuex)

const store = new Vuex.Store({
  state: {
    // 你的状态
  },
  mutations: {
    // 你的 mutations
  },
  actions: {
    // 你的 actions
  }
})

export default store

使用指南：释放强大功能

State：状态中心

Vuex 的 state 是一个存放应用程序状态的对象。通过 this.$store.state.propertyName 可以访问 state 属性。例如，获取当前用户 ID 的代码如下：

this.$store.state.userId

Mutations：状态修改的唯一途径

Mutations 是唯一用于修改 state 的途径。它们必须是同步的，并且不能包含异步操作。例如，增加当前用户积分的代码如下：

this.$store.commit('incrementScore')

Actions：异步操作的舞台

Actions 允许执行异步操作，例如向服务器发送请求。通过 this.$store.dispatch('actionName') 触发 Actions。例如，发送请求获取当前用户详细信息的代码如下：

this.$store.dispatch('fetchUserDetails')

Getters：计算派生状态

Getters 计算派生状态。通过 this.$store.getters.getterName 访问 Getters。例如，计算当前用户总积分的代码如下：

this.$store.getters.totalScore

实例解析：实践出真知

假设有一个 Todo 应用程序，我们使用 Vuex 管理其状态。

1. 安装 Vuex

npm install vuex

2. 创建 store

const store = new Vuex.Store({
  state: {
    todos: []
  },
  mutations: {
    addTodo(state, todo) {
      state.todos.push(todo)
    }
  },
  actions: {
    addTodo({ commit }, todo) {
      commit('addTodo', todo)
    }
  }
})

export default store

3. 使用 Vuex

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

<script>
export default {
  data() {
    return {
      newTodo: ''
    }
  },
  computed: {
    todos() {
      return this.$store.state.todos
    }
  },
  methods: {
    addTodo() {
      this.$store.dispatch('addTodo', {
        text: this.newTodo
      })
      this.newTodo = ''
    }
  }
}
</script>