vuex 动态注册方法 registerModule的实现


Posted in Javascript onJuly 03, 2019

Vuex(2.3.0+)可以用store.registerModule方法在进入路由时进行注册,离开路由时候销毁 actions, mutations, getters, state,在一定范围内相同名称不会被覆写

例子

index.js

传this 的写法

module.exports = {
  install(_this) {
    _this.$store.registerModule(['abc'], {
      namespaced: true,
      state: {
        rightTest: 999
      },
      actions: {
        setTest: ({commit}, val) => {
          commit('putTest', val)
        }
      },
      mutations: {
        putTest: (state, val) => {
          state.rightTest = val;
        }
      }
    })
  },
  uninstall(_this) {
    _this.$store.unregisterModule(['abc'])
  }
};

不传this,有写 store 的写法

import store from '../../store';

export default {
  install() {
    store.registerModule(['abc'], {
      namespaced: true,
      state: {
        rightTest: 999
      },
      actions: {
        setTest: ({commit}, val) => {
          commit('putTest', val)
        }
      },
      mutations: {
        putTest: (state, val) => {
          state.rightTest = val;
        }
      }
    })
  },
  uninstall() {
    store.unregisterModule(['abc'])
  }
}

调用方法时应该在创建完实例之后的钩子中,未创建实例调用会找不到 store。

在install、uninstall时,传递this过去,可以在上面中直接调用。

dispath 时,如果设置了命名空间,则一定要加上,我这个因为没使用较复杂的命名,注册时的名字就在命名空间那用了。

test.vue

import abc from '../../store/test';
...
created() {
  // 挂载对应的 store
  abc.install(this);
  console.log(this.$store, 'install');
},
destroyed() {
  // 销毁对应的 store
  abc.uninstall(this);
  console.info(this.$store, 'uninstall');
},
methods: {
 test(){
  this.$store.dispatch('abc/setTest', Math.random());
 }

总结

当范围内使用动态方法注册 actions 时还是比较爽的,而且在destroyed 钩子中销毁可以节省一部分资源;

配置命名空间也可以避免覆盖问题,算是多一种手段吧(感觉还是应用在多模块,全局注册时用到这个);

当没有父子关系时,但还需要多页面共享状态,可以用动态注册就不太方便了;
(我好像还是没解决全局注册时方法过多的问题。。。)

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
THREE.JS入门教程(5)你应当知道的十件事
Jan 24 Javascript
jquery在Chrome下获取图片的长宽问题解决
Mar 20 Javascript
js使用数组判断提交数据是否存在相同数据
Nov 27 Javascript
jquery简单实现鼠标经过导航条改变背景图
Dec 17 Javascript
javascript实现手机震动API代码
Aug 05 Javascript
javascript基本算法汇总
Mar 09 Javascript
JavaScript 中使用 Generator的方法
Dec 29 Javascript
Vue实现textarea固定输入行数与添加下划线样式的思路详解
Jun 28 Javascript
浅谈小程序 setData学问多
Feb 20 Javascript
javascript 数组精简技巧小结
Feb 26 Javascript
微信小程序实现日历小功能
Nov 18 Javascript
详解Vite的新体验
Feb 22 Javascript
微信小程序中如何使用flyio封装网络请求
Jul 03 #Javascript
JQuery+Bootstrap 自定义全屏Loading插件的示例demo
Jul 03 #jQuery
使用vue实现各类弹出框组件
Jul 03 #Javascript
elementUI vue this.$confirm 和el-dialog 弹出框 移动 示例demo
Jul 03 #Javascript
使用微信SDK自定义分享的方法
Jul 03 #Javascript
微信小程序判断页面是否从其他页面返回的实例代码
Jul 03 #Javascript
8 个有用的JS技巧(推荐)
Jul 03 #Javascript
You might like
ThinkPHP函数详解之M方法和R方法
2015/09/10 PHP
将PHP的session数据存储到数据库中的代码实例
2016/06/24 PHP
yii2实现分页,带搜索的分页功能示例
2017/01/07 PHP
PHP编程中的Session阻塞问题与解决方法分析
2017/08/07 PHP
PHP+MySQL实现输入页码跳转到指定页面功能示例
2018/06/01 PHP
解析window.open的使用方法总结
2013/06/19 Javascript
当前页禁止复制粘贴截屏代码小集
2013/07/24 Javascript
深入理解JSON数据源格式
2014/01/10 Javascript
JavaScript通过事件代理高亮显示表格行的方法
2015/05/27 Javascript
VUEJS实战之利用laypage插件实现分页(3)
2016/06/13 Javascript
探究JavaScript中的五种事件处理程序方式
2016/12/07 Javascript
分享bootstrap学习笔记心得(组件及其属性)
2017/01/11 Javascript
vue双花括号的使用方法 附练习题
2017/11/07 Javascript
JQuery通过后台获取数据遍历到前台的方法
2018/08/13 jQuery
vue打包使用Nginx代理解决跨域问题
2018/08/27 Javascript
微信小程序实现带缩略图轮播效果
2018/11/04 Javascript
写gulp遇到的ES6问题详解
2018/12/03 Javascript
Jquery获取radio选中值实例总结
2019/01/17 jQuery
Node.js折腾记一:读指定文件夹,输出该文件夹的文件树详解
2019/04/20 Javascript
D3.js 实现带伸缩时间轴拓扑图的示例代码
2020/01/20 Javascript
JS实现联想、自动补齐国家或地区名称的功能
2020/07/07 Javascript
JavaScript快速调试的两个技巧
2020/11/04 Javascript
Vue使用Element实现增删改查+打包的步骤
2020/11/25 Vue.js
详解为什么Vue中的v-if和v-for不建议一起用
2021/01/13 Vue.js
[00:32]2018DOTA2亚洲邀请赛EG出场
2018/04/03 DOTA
在python中实现对list求和及求积
2018/11/14 Python
Html5 滚动穿透的方法
2019/05/13 HTML / CSS
英国的屈臣氏:Boots博姿
2017/12/23 全球购物
什么是符号链接,什么是硬链接?符号链接与硬链接的区别是什么?
2013/05/03 面试题
店长助理岗位职责
2013/12/13 职场文书
2014年向国旗敬礼活动总结
2014/09/27 职场文书
房屋出售授权委托书
2014/10/12 职场文书
2015年客服工作总结范文
2015/04/02 职场文书
2015年设计师个人工作总结
2015/04/25 职场文书
检讨书范文
2019/04/16 职场文书
nginx+lua单机上万并发的实现
2021/05/31 Servers