By gholl in Vue — Dec 19, 2023

Vuex：状态管理入门与实践

简介

Vue.js 是一款构建用户界面的渐进式框架，而易于扩展。然而，在大型项目中，仅使用 Vue.js 难以管理应用的状态。为了解决这个问题，Vuex 应运而生。Vuex 是一个专为 Vue.js 应用程序开发的状态管理模式和库。它采用集中式存储管理应用的所有组件的状态，并以相应的规则保证状态以一种可预测的方式发生变化。

Vuex 的概念

状态（State）

状态是应用内部的一种数据类型，它表示应用的某个特定时刻的样子。在 Vuex 中，状态以对象的形式存储。

突变（Mutation）

突变是用于更改状态的一种方法。它是一个同步操作，通过提交 mutation，我们可以改变状态树的一部分。在 Vuex 中，突变是使用 mapState、mapGetters、mapMutations、mapActions 等工具创建的。

动作（Actions）

动作是异步操作，用于访问 API 或执行其他耗时任务。与突变一样，动作也可以使用 mapActions 创建。

视图（Views）

视图是 Vuex 中的一个重要概念。它是一个包含组件模板和逻辑的文件，与状态管理紧密相连。在每个视图中，我们可以访问状态、突变和动作。

Vuex 的使用方法

安装

在使用 Vuex 之前，首先需要安装它。在项目根目录下运行以下命令：

npm install vuex --save

创建 store

接下来，我们需要创建一个 store 文件。在项目的 src/store 目录下，创建一个名为 index.js 的文件。在这个文件中，我们可以配置 Vuex store。

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

Vue.use(Vuex);

export default new Vuex.Store({
  state: {
    count: 0,
  },
  mutations: {
    increment(state) {
      state.count++;
    },
  },
  actions: {
    increment(context) {
      context.commit('increment');
    },
  },
  getters: {
    doubleCount(state) {
      return state.count * 2;
    },
  },
});

注册 store

在 src/main.js 文件中，我们需要注册刚刚创建的 store。

import Vue from 'vue';
import App from './App.vue';
import store from './store';

Vue.config.productionTip = false;

new Vue({
  store,
  render: (h) => h(App),
}).$mount('#app');

使用 store

在组件中，我们可以使用 mapState、mapGetters、mapMutations 和 mapActions 访问 store 中的状态、突变、动作和获取器。

<template>
  <div>
    <p>Count: {{ count }}</p>
    <button @click="increment">Increment</button>
    <p>Double Count: {{ doubleCount }}</p>
  </div>
</template>

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

export default {
  computed: {
    ...mapState(['count']),
    ...mapGetters(['doubleCount']),
  },
  methods: {
    ...mapMutations(['increment']),
    ...mapActions(['increment']),
  },
};
</script>

实战案例

假设我们有一个待办事项应用，用户可以添加、删除和标记任务。我们可以使用 Vuex 管理应用的状态。

状态定义

state: {
  tasks: [],
  completedTasks: [],
},
mutations: {
  setTasks(state, tasks) {
    state.tasks = tasks;
  },
  setCompletedTasks(state, completedTasks) {
    state.completedTasks = completedT ```
    state.completedTasks = completedTasks;
  },
},
actions: {
  addTask(context, task) {
    context.commit('setTasks', [...context.state.tasks, task]);
  },
  deleteTask(context, index) {
    context.commit('setTasks', context.state.tasks.filter(($) => $ !== context.state.tasks[index]));
  },
  markTaskAsCompleted(context, index) {\
    context.commit('setCompletedTasks', [...context.state.completedTasks, index]);\
  },
  unmarkTaskAsCompleted(context, index) {\
    context.commit('setCompletedTasks', context.state.completedTasks.filter(($) => $ !== context.state.tasks[index]));\
  },
},
getters: {
  filteredTasks: (state) => state.tasks.filter((task) => task.completed === false),
  completedTaskCount: (state) => state.completedTasks.length,
});

组件逻辑

<template>
  <div>
    <h2>Tasks</h2>
    <ul>
      <li v-for="(task, index) in tasks" :key="index">
        <input type="checkbox" @change="markTaskAsCompleted(index)" v-model="task.completed" />
        {{ task.title }}</li>
    </ul>
    <input v-model="newTask" @keyup.enter="addTask" placeholder="Add new task" />
    <button @click="deleteTask(0)">Delete first task</button>
  </div>
</template>

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

export default {
  computed: {
    ...mapState(['tasks', 'completedTasks']),
    ...mapGetters(['filteredTasks', 'completedTaskCount']),
  },
  data() {
    newTask = '';
  },
  methods: {
    ...mapMutations(['addTask', 'deleteTask', 'markTaskAsCompleted', 'unmarkTaskAsCompleted']),
    ...mapActions(['addTask', 'deleteTask']),
  },
};
</script>

在这个案例中，我们使用 Vuex 管理待办事项应用的状态，包括任务列表、已完成任务列表、添加任务、删除任务、标记任务为已完成和取消已完成状态。通过这个案例，我们可以看到 Vuex 在实际开发中的应用，以及如何利用 Vuex 提高应用性能和可维护性。

总结

Vuex 是一个强大的状态管理库，适用于 Vue.js 应用程序。在本篇文章中，我们介绍了 Vuex 的概念、使用方法以及一个实战案例。通过使用 Vuex，我们可以更好地组织和管理应用的状态，从而提高应用的性能和可维护性。希望这篇文章能帮助你入门 Vuex，并在实际开发中运用 Vuex 优化你的项目。

好好学习，天天向上

Vuex：状态管理入门与实践