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 相关文章推荐
JQuery 插件制作实践 xMarquee插件V1.0
Apr 02 Javascript
jquery DOM操作 基于命令改变页面
May 06 Javascript
jquery 学习之二 属性(类)
Nov 25 Javascript
js检测浏览器版本、核心、是否移动端示例
Apr 24 Javascript
jQuery实现倒计时按钮功能代码分享
Sep 03 Javascript
JavaScript简单拖拽效果(1)
May 17 Javascript
快速掌握jquery分页插件jqPaginator的使用方法
Aug 09 jQuery
Vue中组件之间数据的传递的示例代码
Sep 08 Javascript
node.js基于express使用websocket的方法
Nov 09 Javascript
vue.js给动态绑定的radio列表做批量编辑的方法
Feb 28 Javascript
Vue2.0实现简单分页及跳转效果
Jul 29 Javascript
Vue自定义指令结合阿里云OSS优化图片的实现方法
Nov 12 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
PHP简单判断iPhone、iPad、Android及PC设备的方法
2016/10/11 PHP
Windows下wamp php单元测试工具PHPUnit安装及生成日志文件配置方法
2018/05/28 PHP
javascript 构建一个xmlhttp对象池合理创建和使用xmlhttp对象
2010/01/15 Javascript
javascript开发中因空格引发的错误
2010/11/08 Javascript
最佳JS代码编写的14条技巧
2011/01/09 Javascript
jQuery bxCarousel实现图片滚动切换效果示例代码
2013/05/15 Javascript
Js中的onblur和onfocus事件应用介绍
2013/08/27 Javascript
JavaScript中输出标签的方法
2014/08/27 Javascript
D3.js 从P元素的创建开始(显示可加载数据)
2014/10/30 Javascript
jQuery 重复加载错误以及修复方法
2014/12/16 Javascript
JS+CSS实现的拖动分页效果实例
2015/05/11 Javascript
jQuery网页定位导航特效实现方法
2016/12/19 Javascript
浅谈Vue下使用百度地图的简易方法
2018/03/23 Javascript
官方推荐react-navigation的具体使用详解
2018/05/08 Javascript
vue-router 前端路由之路由传值的方式详解
2019/04/30 Javascript
利用d3.js实现蜂巢图表带动画效果
2019/09/03 Javascript
js+canvas实现纸牌游戏
2020/03/16 Javascript
详细分析React 表单与事件
2020/07/08 Javascript
vue实现登录、注册、退出、跳转等功能
2020/12/23 Vue.js
python实现根据月份和日期得到星座的方法
2015/03/27 Python
python爬虫面试宝典(常见问题)
2018/03/02 Python
python 读取竖线分隔符的文本方法
2018/12/20 Python
Python基础之变量基本用法与进阶详解
2020/01/03 Python
Python定时器线程池原理详解
2020/02/26 Python
django列表筛选功能的实现代码
2020/03/27 Python
python程序输出无内容的解决方式
2020/04/09 Python
Python run()函数和start()函数的比较和差别介绍
2020/05/03 Python
python 基于opencv实现高斯平滑
2020/12/18 Python
用Python实现定时备份Mongodb数据并上传到FTP服务器
2021/01/27 Python
馥蕾诗美国官网:Fresh美国
2019/10/09 全球购物
英语系毕业生求职信
2014/07/13 职场文书
领导干部“四风”查摆问题个人整改措施
2014/10/28 职场文书
2014年打非治违工作总结
2014/11/13 职场文书
2016年党员承诺书范文
2016/03/24 职场文书
提高系统的吞吐量解决数据库重复写入问题
2022/04/23 MySQL
优化Mysql查询的示例
2022/04/26 MySQL