如何使用Vuex Store和计算属性遍历传递给组件的对象数组？

Question

我正在构建一个项目来学习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: 'johndoe@gmail.com' },
      { id: 2, name: 'Jane Doe', email: 'janedoe@gmail.com'  },
      { id: 3, name: 'Mark Greywood', email: 'markgreywood@gmail.com'  },
    ]
  },
  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>

我不明白我做错了什么。

Answer 1

您无权访问users这行代码

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

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

所以，迭代应该是

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