vuex中使用多模块时,如果不同模块中action有名字冲突该如何解决
Posted bobo1
tags:
篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了vuex中使用多模块时,如果不同模块中action有名字冲突该如何解决相关的知识,希望对你有一定的参考价值。
如果希望你的模块具有更高的封装度和复用性,你可以通过添加 namespaced: true
的方式使其成为带命名空间的模块。当模块被注册后,它的所有 getter、action 及 mutation 都会自动根据模块注册的路径调整命名
const store = new Vuex.Store({ modules: { account: { namespaced: true, // 模块内容(module assets) state: { ... }, // 模块内的状态已经是嵌套的了,使用 `namespaced` 属性不会对其产生影响 getters: { isAdmin () { ... } // -> getters[‘account/isAdmin‘] }, actions: { login () { ... } // -> dispatch(‘account/login‘) }, mutations: { login () { ... } // -> commit(‘account/login‘) }, // 嵌套模块 modules: { // 继承父模块的命名空间 myPage: { state: { ... }, getters: { profile () { ... } // -> getters[‘account/profile‘] } }, // 进一步嵌套命名空间 posts: { namespaced: true, state: { ... }, getters: { popular () { ... } // -> getters[‘account/posts/popular‘] } } } } } })
这时候我们在不同模块写方法就不用担心命名冲突了
以上是关于vuex中使用多模块时,如果不同模块中action有名字冲突该如何解决的主要内容,如果未能解决你的问题,请参考以下文章
Vuex modules的简单使用,Vue状态管理多模块实现
如何在 Vuex 4 和 TypeScript 中使用其他存储模块 getter/actions/mutations