vue-cli@3封装多模块Vuex（vue项目模板封装系列）

前言

上一期分享了如何在vue-cli3的框架中，封装Axios。本期将分享如何在vue项目中添加Vuex，并封装使用。

本文内容偏重于vuex的使用介绍，因此，并不会对项目案例中vuex的细节进行讲解，强烈建议读者配合GitHub上面的项目实例进行对比阅读，这样会帮助你更好地理解案例中vuex封装使用的全过程（ps：主要是我觉得我的案例代码写的还可以，一看就懂，文章内容属于案例代码的阅读目录）。

GitHub项目地址：https://github.com/jiangjiaheng/web-template

关于Vuex

1. 官方文档

本文默认你对vuex有一定的了解，并且阅读过vuex的官方文档，因此本文就不在赘述关于Vuex的基础知识。

Vuex官方文档地址：https://vuex.vuejs.org/zh/guide/

2. 个人理解

如果你已经阅读过Vuex的官方文档，相信你已经认识了state, getter, mutation, action, modules ，它们都是Vuex的核心元素。

关于它们的具体内容，不在赘述，在这里面我只是简单总结一下，这几个元素的特点、作用，帮助初学者更好地理解。

• state 类似于vue中data，用于存放数据模型；

• getter类似于vue中computed，相当于state的计算属性；

• mutation类似于vue中的method，只有它的方法函数可以改变state的值，同时它的方法函数必须是同步，不能是异步；

• action类似mutation，但是它只能通过调用mutation来改变state的值，同时它的函数方法可以是异步的；

• modules可以引入多个module，通过这个属性，我们可以添加多个module进入Vuex的store中。

项目实例

1. 介绍

如上图所示，我将通过自己创建评分组件，为你展示如何封装多个module的Vuex仓库，并且优雅地使用它们。

2. 添加Vuex

npm add vuex

在vue项目所在文件夹内打开命令行，输入上面的指令，即可添加Vuex。

添加成功后，你就可以在src文件夹下，看到store文件夹，并且在main.js中，也会自动添加store。

3. 封装modules

在store的文件夹中，创建一个modules文件夹，并且在该文件夹中添加modulA.js，moduleB.js文件。

再在两个module文件中添加，各自module的内容。

最后在store.js中引入这两个模块，完成封装。

4. 创建评分卡片

在component文件夹下面，添加一个RateCard.vue文件，添加代码。

5. 在vue文件中引用Vuex

在home.vue引入RateCard，然后再引入vuex，进行使用。