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 namespaced的作用以及使用方式

Vuex modules的简单使用,Vue状态管理多模块实现

如何在 Vuex 4 和 TypeScript 中使用其他存储模块 getter/actions/mutations

在另一个模块操作中获取 vuex 模块状态

如何在 Vuex 模块 Actions 中使用 vue-router?

VUEX 使用学习六 : modules