报错：[vuex] duplicate getter key: list ——＞不同的模块有相同的名字，产生了冲突

最新推荐文章于 2024-08-04 22:58:25 发布

三月.'

最新推荐文章于 2024-08-04 22:58:25 发布

阅读量809

点赞数

分类专栏：报错合集文章标签： vue.js 前端 javascript

本文链接：https://blog.csdn.net/qq_56715703/article/details/129337209

版权

报错合集专栏收录该内容

18 篇文章

订阅专栏

文章讲述了在Vue.js应用中，由于不同模块间存在同名的getter键list导致的冲突问题，以及如何通过在Vuex的模块中启用命名空间(namespaced:true)来解决这个问题。这样，当引用子模块如user时，需在mapGetters中指定命名空间，如list:user/list，以正确获取数据。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

翻译是：重复的 getter 键: list

问题：不同的模块有相同的名字list，产生了冲突

解决：在每个有list命名的模块暴露中加入namespaced:true （启用命名空间）其默认值是false。

加上命名空间之后，如果再想要此文件中的数据，那就必须要带上命名空间才能取到。

之后在引入子模块的index.js中使用modules时，其内就是命名空间的名称。

所以需要在mapGetters的属性值中加入此命名空间。

例如：

user.js：

// 声明state
const state={
    list:[
        {id:1,name:'王硕显',type:'qqVIP'},
        {id:2,name:'王硕显2',type:'VIP'},
        {id:3,name:'王硕显3',type:'VIPPP'},
        {id:4,name:'王硕显4',type:'vvVIP'},
    ]
}

// 声明getters
const getters={
    list(state){
        return state.list
    }
}

// 导出
export default{
    state,
    getters,
    namespaced:true//默认值:false,. true:启用命名空间
}

引入子模块 index.js。 modules中的user是命名空间的名称

import Vue from 'vue'
// 引入vuex
import Vuex from 'vuex'
Vue.use(Vuex)

// 引入子模块
import order from './modules/order'
import user from './modules/user'

// 创建store对象
const store = new Vuex.Store({
    modules:{
        user,//子模块,是命名空间的名称
    }
})

// 导出store
export default store

在User.vue中使用时：list:'user/list' 就必须带上命名空间user才能取到数据

<template>
  <div>
    <h2>会员中心</h2>
    <ul>
      <li v-for="item in list" :key="item.id">
        <div>姓名：{{ item.name }}</div>
        <div>会员级别：{{ item.type }}</div>
      </li>
    </ul>
  </div>
</template>
 
<script>
// 导出辅助函数
import { mapGetters } from 'vuex'
export default {
  computed:{
    ...mapGetters({
      //:左侧自定义属性名 ：右侧映射到user下的getters中的方法名
      list:'user/list'
    })
  }
}
</script>

<style>

</style>

结果为：