Javascript 使用vuex映射器在用户的状态obj中进行迭代

我现在正在学习vuex，我一直在使用映射功能，比如从“vuex”导入{mapGetters}； 在我的状态中，我有一个名为users的对象，我在其中保存用户数据，稍后将添加addNewUser功能以扩展用户的对象。但是对于这个测试用例，我刚刚创建了一个名为“John”的虚拟用户：

从“Vue”导入Vue；
从“Vuex”导入Vuex；
Vue.use（Vuex）；
导出默认的新Vuex.Store({
声明：{
用户：[
{
用户名：“John”，
收入：2000年，
剩余：0
}
]
},
吸气剂：{
用户：state=>{
返回state.users；
},
},
突变：{}，
行动：{
addNewUser（用户名、收入）{
log（用户名、收入，“来自vuex”）；
}
},
模块：{}
});

在我这样做之前，我用

this.$store.state.users

简单地调用了john，然后用forEach遍历

用户名。但我发现这不是最好的方法

我怎样才能获得用户的状态数据，并像以前一样以forEach循环的方式打印出来呢

在第129行
loadAllUsers（）
中，您可以看到我实现这一点的老方法：


设置
&时代；
用户：


{{user.userName}


添加新用户：
接近
保存更改
从“vuex”导入{mapGetters}；
//从“vuex”导入{mapActions}；
导出默认值{
数据（）{
返回{
用户名输入：“”，
userIncomeInput:“”，
用户列表：[]
};
},
计算：{
…映射获取程序（['user']），
printUserTest（用户）{
返回用户；
}
},
已创建：函数（）{
这是loadAllUsers（）；
},
方法：{
//…映射操作({
//addNewUser:'addNewUser'
// }),
loadAllUsers（）{
让allUsers=this.$store.state.users；
allUsers.forEach（用户=>{
this.userList.push（{userName:user.userName}）；
});
// },
//createNewUser（）{
//让userName=this.userNameInput；
//让userIncome=this.userIncomeInput；
//console.log（用户名、用户收入）；
// }
}
}
};
#用户模式{
颜色：$黑色；
.输入组文本{
宽度：46px；
}
}
使用
mapGetters
您可以将商店中的
用户映射到计算出的用户。这将是被动的

因此，您甚至不需要加载用户


Vue.config.devtools=false；
Vue.config.productionTip=false；
const store=新的Vuex.store({
声明：{
用户：[{
用户名：“John”，
收入：2000年，
剩余：0
}]
},
吸气剂：{
用户：state=>{
返回state.users；
},
}
})
var app=新的Vue({
el:“#应用程序”，
商店，
计算：{
…Vuex.mapGetters（[“用户]），
}
})

{{user.userName}
使用
mapGetters
您可以将商店中的
用户映射到计算出的用户。这将是被动的

因此，您甚至不需要加载用户


Vue.config.devtools=false；
Vue.config.productionTip=false；
const store=新的Vuex.store({
声明：{
用户：[{
用户名：“John”，
收入：2000年，
剩余：0
}]
},
吸气剂：{
用户：state=>{
返回state.users；
},
}
})
var app=新的Vue({
el:“#应用程序”，
商店，
计算：{
…Vuex.mapGetters（[“用户]），
}
})

{{user.userName}
如果可以使用mapState，请在computed中声明userList而不是数据：

  computed: {
    ...mapState({
      userList: state => state.users.map(user => user.userName),
    })

在html代码中，将所有
user.userName
更改为
user
如果可以使用mapState，请在computed中声明userList而不是数据：

  computed: {
    ...mapState({
      userList: state => state.users.map(user => user.userName),
    })

在html代码中，将所有
user.userName
更改为
user
为什么不在vuex中使用mapState来获取userListidk tbh。但同样的问题是，我如何为obj中的用户迭代呢？在您的示例中不需要getter。除模板外，无需在任何地方进行迭代。创建getter只是为了返回当前接受的答案中的一段状态，这是一种不好的做法。为什么不在vuex中使用mapState来获取userListidk tbh呢。但同样的问题是，我如何为obj中的用户迭代呢？在您的示例中不需要getter。除模板外，无需在任何地方进行迭代。创建一个getter只是返回当前接受的答案中的一段状态，这是一种糟糕的做法。