翻译是:重复的 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>
结果为:
![](https://i-blog.csdnimg.cn/blog_migrate/6e98bdfc52161fe56cccc95d6b35ec83.png)