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 UI AutoComplete 使用说明
Jun 20 Javascript
ie6下png图片背景不透明的解决办法使用js实现
Jan 11 Javascript
jquery获取特定name所有选中的checkbox,支持IE9标准模式
Mar 18 Javascript
javascript与有限状态机详解
May 08 Javascript
js防止页面被iframe调用的方法
Oct 30 Javascript
node.js中的buffer.slice方法使用说明
Dec 10 Javascript
JavaScript必知必会(六) delete in instanceof
Jun 08 Javascript
在JS中a标签加入单击事件屏蔽href跳转页面
Dec 16 Javascript
js验证手机号、密码、短信验证码代码工具类
Jun 24 Javascript
浅谈React Native Flexbox布局(小结)
Jan 08 Javascript
JS常见面试试题总结【去重、遍历、闭包、继承等】
Aug 27 Javascript
Vue中img的src是动态渲染时不显示的解决
Nov 14 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
上海永华YH-R296(华普R-96)12波段立体声收音机的分析和打理
2021/03/02 无线电
sphinx增量索引的一个问题
2011/06/14 PHP
让PHP显示Facebook的粉丝数量方法
2014/01/08 PHP
thinkphp普通查询与表达式查询实例分析
2014/11/24 PHP
php实现在服务器端调整图片大小的方法
2015/06/16 PHP
thinkphp利用模型通用数据编辑添加和删除的实例代码
2016/11/20 PHP
用js计算页面执行时间的函数
2006/12/07 Javascript
jQuery提示效果代码分享
2014/11/20 Javascript
jQuery中noConflict()用法实例分析
2015/02/08 Javascript
jQuery+PHP实现动态数字展示特效
2015/03/14 Javascript
JavaScript中textRange对象使用方法小结
2015/03/24 Javascript
jQuery插件scroll实现无缝滚动效果
2015/04/27 Javascript
jquery实现不包含当前项的选择器实例
2015/06/25 Javascript
jQuery实现为控件添加水印文字效果(附源码)
2015/12/02 Javascript
js前端实现多图图片上传预览的两个方法(推荐)
2016/11/18 Javascript
JavaScript中关于class的调用方法
2017/11/28 Javascript
bootstrap中日历范围选择插件daterangepicker的使用详解
2018/04/17 Javascript
js实现小球在页面规定的区域运动
2020/06/16 Javascript
使用python装饰器计算函数运行时间的实例
2018/04/21 Python
Python django使用多进程连接mysql错误的解决方法
2018/10/08 Python
Django 多环境配置详解
2019/05/14 Python
python递归法实现简易连连看小游戏
2020/03/25 Python
Python实现一个带权无回置随机抽选函数的方法
2019/07/24 Python
Python开发之pip安装及使用方法详解
2020/02/21 Python
python列表删除和多重循环退出原理详解
2020/03/26 Python
Puritan’s Pride(普丽普莱)官方网站:美国最大最全的保健品公司之一
2016/10/23 全球购物
学习全国两会精神心得体会范文
2014/03/17 职场文书
老师对学生的评语
2014/04/18 职场文书
中秋节国旗下演讲稿
2014/09/05 职场文书
住房抵押登记委托书
2014/09/27 职场文书
党员干部反四风民主生活会对照检查材料思想汇报
2014/10/12 职场文书
首次购房证明
2015/06/19 职场文书
初中英语教师个人工作总结2015
2015/07/21 职场文书
幼儿园小班教学反思
2016/03/03 职场文书
SpringBoot 拦截器妙用你真的了解吗
2021/07/01 Java/Android
Golang 遍历二叉树
2022/04/19 Golang