案例：事项列表的数据通信

学习完本章 Vuex 状态管理的内容之后，在组件通信方面就有了更加丰富的选择，还是在之前的待办事项系统案例基础上，将 mitt 的通信方式更换成 Vuex，将整个项目的数据统一由 Vuex 管理，使得代码变得更加合理，更加清晰。

功能描述

主要功能和前面的待办事项系统功能一致，利用 Vuex 实现组件通信和数据管理，主要改造如下：

  • 将待办事项列表 todoItems 和回收站事项列表 recycleItems 放在 Vuex 的 store 中。

  • 相关增加事项、删除事项、恢复事项等操作逻辑由 action 和 mutation 来实现。

案例完整代码

这里举几个改造源码的例子。

例如，新建 store.js，定义 state、action、mutation，代码如下：

import {createStore} from 'vuex'
import dataUtils from '../utils/dataUtils'
const myPlugin = (store) => {
  store.subscribe((mutation, state) => {
    // 每次调用mutation，在这里持久化数据
    dataUtils.setItem('todoList', state.todoItems)
    dataUtils.setItem('recycleList', state.recycleItems)
  })
}
export default createStore({
  plugins: [myPlugin],
  state: {
    todoItems:dataUtils.getItem('todoList') || [],
    recycleItems:dataUtils.getItem('recycleList') || [],
  },
  mutations: {
    /*
    * 添加事项
    */
    addTodo (state, obj) {
      state.todoItems.unshift(obj)
    },
    /*
    * 添加回收站事项
    */
    addRecycle (state, obj) {
      state.recycleItems.unshift(obj)
    },
    /*
    * 删除回收站事项
    */
    deleteRecycle (state, obj) {
      // 以下逻辑为找到对应id的事项，然后删除
      state.recycleItems = state.recycleItems.filter(item=>{
        return item.id != obj.id
      })
    },
    /*
    * 删除事项
    */
    deleteTodo (state, obj) {
      // 以下逻辑为找到对应id的事项，然后删除
      state.todoItems = state.todoItems.filter(item=>{
        return item.id != obj.id
      })
    },
    /*
    * 重置事项列表
    */
    resetTodo(state, array){
      state.todoItems = array
    }
  },
  actions: {
    addTodo (context, obj) {
      context.commit('addTodo', obj)
    },
    addRecycle (context, obj) {
      context.commit('addRecycle', obj)
    },
    deleteTodo(context, obj){
      // 先删除代办事项
      context.commit('deleteTodo', obj)
      // 后增加回收站事项
      context.commit('addRecycle', obj)
    },
    revertTodo(context, obj){
      // 先删回收站事项
      context.commit('deleteRecycle', obj)
      // 后增加代办事项
      context.commit('addTodo', obj)
    }
  }
})

上面的代码中，不仅定义了基本的 state、action、mutation，还定义了一个 Vuex 插件，这个插件的功能是在所有 mutation 调用后执行数据持久化逻辑。

例如，在 todo.vue 中，之前的删除事项逻辑需要删除 todoItems 对应的元素，同时还要 mitt 通知回收站列表 recycleItems 添加对应的元素，在使用了 Vuex 后，直接调用一个 action 即可，代码如下：

/**
* 删除事项
*/
const deleteItem = (obj)=>store.dispatch('deleteTodo',obj)

只需一行代码即可，逻辑放在 action 中，更加简洁清晰。

以上只列举了核心的 Vuex 改造源码的例子，具体的业务逻辑代码就不再列举，读者可参考完整源码，执行 npm run serve 命令即可启动完整源码程序。

本案例完整源码：/案例源码/Vuex状态管理。

小结与练习

本章讲解了 Vuex 的相关知识，主要内容包括：Vuex 概述、state、getter、mutation、action、modules、Vuex 的适用场合。Vuex 的官方解释是一个专为 Vue.js 应用开发的状态管理模式，通俗点来解释就是一个帮助 Vue.js 应用解决复杂的组件通信方式的工具。理解并掌握 Vuex 中的 5 个基本对象以及 Vuex 的工作流程是学习本章知识的关键，Vuex 的工作流程可以回顾本章开头的流程图。

对于 Vuex 的选择和使用需要根据实际情况，对于大型的 Vue 项目，一般都需要使用 Vuex，而对于小型的 Vue 应用，则不必使用 Vuex。最后建议读者自行运行一下本章提供的各个示例代码，以便加深对知识的理解和掌握。

下面来检验一下读者对本章内容的掌握程度：

  • 什么是状态管理模式？

  • Vuex 中的 5 个基本对象是什么？

  • Vuex 中的 store 是什么，与 5 个基本对象的关系是什么？

  • Vuex 中的 state 的作用是什么？

  • Vuex 中的 mutation 和 action 有什么异同？

  • 在项目中使用 Vuex 需要遵守什么原则？