vuex 动态注册方法 registerModule的实现
更新时间：2019年07月03日 14:39:02 作者：cason6810
这篇文章主要介绍了vuex 动态注册方法 registerModule的实现，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧
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 钩子中销毁可以节省一部分资源；
配置命名空间也可以避免覆盖问题，算是多一种手段吧（感觉还是应用在多模块，全局注册时用到这个）；
当没有父子关系时，但还需要多页面共享状态，可以用动态注册就不太方便了；
（我好像还是没解决全局注册时方法过多的问题。。。）
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持脚本之家。
相关文章
下面小编就为大家分享一篇解决vue打包之后静态资源图片失效的问题，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧2018-02-02
这篇文章主要介绍了vue+element实现打印页面功能，本文通过实例代码给大家介绍的非常详细，具有一定的参考借鉴价值 ,需要的朋友可以参考下2019-05-05
在本篇文章里小编给各位整理的是一篇关于Vue引入Stylus知识点总结内容，有需要的朋友们可以学习参考下。2020-01-01
这篇文章主要为大家详细介绍了vue实现登录验证码，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2021-08-08
使用electron-builder将项目打包成桌面程序的详细教程
这篇文章主要介绍了使用electron-builder把web端的项目打包生成桌面程序,并可安装程序,文中通过代码示例和图文结合的方式给大家介绍的非常详细,具有一定的参考价值,需要的朋友可以参考下2024-08-08
这篇文章主要介绍了从0到1搭建Element的后台框架的方法步骤，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧2019-04-04
vue3使用threejs实现3D卡片水平旋转效果的示例代码
这篇文章主要介绍了在vue3中使用threejs实现3D卡片水平旋转效果,文中通过代码示例讲解的非常详细,对大家的学习或工作有一定的帮助,需要的朋友可以参考下2024-04-04
本篇文章主要介绍了Vuex 模块化(module)，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧2017-09-09
这篇文章主要介绍了TypeScript中集成Tween.js踩坑记录，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教2023-01-01
这篇文章主要介绍了vue3项目中封装axios的示例代码,本文通过示例代码给大家介绍的非常详细，对大家的学习或工作具有一定的参考借鉴价值，需要的朋友可以参考下2022-12-12
最新评论