Vuex 单状态库与多模块状态库详解

Vuex 是一个专为 Vue.js 应用程序开发的状态管理模式。如果您需要构建是一个中大型单页应用，您很可能会考虑如何更好地在组件外部管理状态，Vuex 将会成为自然而然的选择。之前在做旅游页的时候对 Vuex 进行了简单的了解。近期在做 Vue 项目的同时重新学习了 Vuex 。本篇博文主要总结一下 Vuex 单状态库和多模块 modules 的两类使用场景。本篇所有代码是基于 Vue-Cli 3.x 版本的脚手架工具进行编写的。这是一个仅有单个 Vuex store 状态库的 Demo。在入口文件 main.js 中通过 import 引入 store，并注册到 Vue 的实例上。在相应的组件中如下引入并在 methods 中使用 mapActions。除了使用方式有一定不同之外，methods 中的 mapActions 也更换了书写方式，第一个参数是对应 store 管理的数据，第二个参数是关于操作事件的数组。