修身养性,知行合一

  • 首页
  • 爱码
    • 系统
    • 数据库
    • JavaScript
    • CSharp
    • Python
  • 生活
    • 文化
    • 美食
  • 杂谈
  • 关于
修身养性,知行合一
码字,杂谈
  1. 首页
  2. 爱码
  3. 前端
  4. JavaScript
  5. 正文

vuex模块化详解

2019年8月8日 4131点热度 2人点赞 0条评论

vuex为我们提供了状态管理的解决方案,其最基本的结构如下:

file

在main.js层级下创建一个store.js文件,写入:

file

然后导入main.js并注册:

file

这样,最基本的vuex就可以使用了。

随着actions和mutations中的方法越来越多,文件越来越臃肿,我们会觉得越来越不好用。

那么就需要对vuex进行模块化处理。


实现的层级方案,分别是箭头对应的关系:

file

在子文件夹中分别写入对应的属性和方法,并在*.module.js中注册,以shot为例:

file

另外说一下,有新人对ES6语法不熟悉,稍微讲一下导入语法,如果使用

export const state = {
    all: []
}

方式导入,在导入时需要加上 {}, 也就是上图写的方式。

但是如果使用

export dufault {
    all: []
}

的方式,则不需要大括号导入,这是ES6基本语法,知道这些对于这篇文章已经够用了,不再详述,更多请自行看文档。

继续说vuex,模块写好后,在主store.js中注册:

file

这里已经填上了模块的名字。主文件不用改变。

对于模块化的使用,我一直推荐同名使用原则,名字起的清楚明了,对于使用者本身也是一种好事。

基本使用方法,state和actions类似:

file

这样就可以直接使用this.departmentList属性或者this.addDepartment()方法了。

如果非要不同名,那么vuex也提供了方案:

file

还可以使用箭头函数来实现:

file

我本人更喜欢第一种,同名使用,使用简单,代码简洁。当然,后期还可以使用types为函数名统一管理。这里就不列举例子了。

本作品采用 知识共享署名-非商业性使用-相同方式共享 4.0 国际许可协议 进行许可
标签: JavaScript vue vuex
最后更新:2019年8月8日

jeremyjone

这个人很懒,什么都没留下

打赏 点赞
< 上一篇
下一篇 >

文章评论

取消回复

最新 热点 随机
最新 热点 随机
关于 *.vue 文件中使用 TypeScript 声明类型报错的解决方案 element table 加载时宽度闪烁问题 windows 无法登录便签、OneNote等应用 vue2 中 vuex 对 ts 的支持 封装一个极简的右键菜单 vue2 使用 @vue/composition-api 的一些问题
前端优化的几个点 IdentityServer4深入使用(五)-- 数据持久化 解决mount cifs时出现"is not a valid block device"的问题 JS/Vue动态获取浏览器高度 手动实现JS防抖 Windows Server 2019安装与配置(三)

(っ•̀ω•́)っ✎⁾⁾ 开心每一天

COPYRIGHT © 2021 jeremyjone.com. ALL RIGHTS RESERVED.

THEME KRATOS MADE BY VTROIS

京ICP备19012859号-1

京公网安备 11010802028585号