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 钩子中销毁可以节省一部分资源；
配置命名空间也可以避免覆盖问题，算是多一种手段吧（感觉还是应用在多模块，全局注册时用到这个）；
当没有父子关系时，但还需要多页面共享状态，可以用动态注册就不太方便了；
（我好像还是没解决全局注册时方法过多的问题。。。）
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持脚本之家。
相关文章
Typescript 5年内的热度随时间变化的趋势，整体呈现一个上升的趋势。也说明ts越来越️受大家的关注了。这篇文章主要介绍了Vue 中使用 typescript的方法详解,需要的朋友可以参考下2020-02-02
本篇文章主要介绍了Vue监听数据变化，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧2017-03-03
这篇文章主要介绍了安装多版本Vue-CLI的实现方法，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧2020-03-03
这篇文章主要介绍了详解vue-cli之webpack3构建全面提速优化，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧2017-12-12
这篇文章主要给大家介绍了关于VUE子组件向父组件传值（含传多值及添加额外参数场景）的相关资料，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧2020-09-09
这篇文章主要介绍了vue 监听 Treeselect 选择项的改变操作，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧2020-08-08
这篇文章主要介绍了Echarts 如何实现一张图现切换不同的X轴,通过动图给大家展示效果，实例代码相结合给大家介绍的非常详细，需要的朋友可以参考下2021-11-11
实现暗黑主题的方式有很多种,也有很多成型的框架可以直接使用,下面这篇文章主要给大家介绍了关于基于vue3&element-plus的暗黑模式的相关资料,需要的朋友可以参考下2022-12-12
随着vue2的落幕,vue3越来成熟,有必要更新一下vue3的父子组件之间的传值方式,这里介绍下vue3+vite+ts父子组件之间的传值方式实例详解,感兴趣的朋友一起看看吧2023-12-12
这篇文章主要介绍了vue实现路由不变的情况下，刷新页面操作,结合实例形式分析了vue路由不变的情况下刷新页面具体原理、操作方法与相关注意事项,需要的朋友可以参考下2020-02-02
最新评论