如何循环遍历传递给具有 Vuex 存储和计算属性的组件的对象数组？

Posted 2023-02-23

【中文标题】如何循环遍历传递给具有 Vuex 存储和计算属性的组件的对象数组？

【英文标题】：How to loop through an array of objects passed to a component with Vuex Store & a computed property?

【发布时间】：2020-02-29 01:24:11

【问题描述】：

我正在构建一个项目来学习 Vuex。我正在我的 store 中创建一个对象数组，如下所示：

Vuex 商店：

import Vue from "vue";
import Vuex from "vuex";

Vue.use(Vuex);

export default new Vuex.Store(
  state: 
    users: [
       id: 1, name: 'John Doe', email: '[e-mail]' ,
       id: 2, name: 'Jane Doe', email: '[e-mail]'  ,
       id: 3, name: 'Mark Greywood', email: '[e-mail]'  ,
    ]
  ,
  mutations: ,
  actions: ,
  modules: 
);

现在，我使用如下计算属性访问组件中的 state：

组件：

<template>
  <div class="home">
    <h1>Hello from Home component</h1>

   <!-- I do not loop through the users, nothing shows --> 
    <div v-for="user in users" :key="user.id"> user.name  </div>

   <!-- I get the users object in the DOM -->
    <div> getUsers </div>
  </div>
</template>

<script>
import  mapState  from 'vuex'

export default 
  name: "Index",
  computed: mapState(
    getUsers: state => state.users
  )
;
</script>

<style scoped lang="less">

</style>

我不明白我做错了什么。

【参考方案1】：

改变这个

    <div v-for="user in users" :key="user.id"> user.name  </div>

到这里

    <div v-for="user in getUsers" :key="user.id"> user.name  </div>

使用您的 mapState 行，您有点告诉组件 - '嘿，我的 store.users 在 getUsers 变量中' 组件不知道“用户”。你没有像那样创建变量。

另一种方法是将循环更改为

    <div v-for="user in $store.state.users" :key="user.id"> user.name  </div>

在这种情况下，您可以删除计算属性“getUsers”

【参考方案2】：

您在这行代码中无权访问users

<div v-for="user in users" :key="user.id"> user.name </div>

您的组件只能访问映射到存储对象users 的getUsers（计算属性）。因此，每当商店中的 users 状态发生变化时，getUser 也会更新。因此，您应该迭代组件中的计算属性。

所以，迭代应该是

<div v-for="user in getUsers" :key="user.id"> user.name </div>

【讨论】：

非常感谢您为我节省了数小时的痛苦，我不知道出了什么问题。还是个初学者'