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

前言

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

vue-cli@3封装多模块Vuex(vue项目模板封装系列)_第1张图片

本文内容偏重于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. 介绍

vue-cli@3封装多模块Vuex(vue项目模板封装系列)_第2张图片

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

2. 添加Vuex

npm add vuex

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

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

vue-cli@3封装多模块Vuex(vue项目模板封装系列)_第3张图片

vue-cli@3封装多模块Vuex(vue项目模板封装系列)_第4张图片

3. 封装modules

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

vue-cli@3封装多模块Vuex(vue项目模板封装系列)_第5张图片

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

vue-cli@3封装多模块Vuex(vue项目模板封装系列)_第6张图片

vue-cli@3封装多模块Vuex(vue项目模板封装系列)_第7张图片

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

vue-cli@3封装多模块Vuex(vue项目模板封装系列)_第8张图片

4. 创建评分卡片

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

vue-cli@3封装多模块Vuex(vue项目模板封装系列)_第9张图片

5. 在vue文件中引用Vuex

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

vue-cli@3封装多模块Vuex(vue项目模板封装系列)_第10张图片
vue-cli@3封装多模块Vuex(vue项目模板封装系列)_第11张图片

你可能感兴趣的:(Vue)