如何遍历通过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: '[email protected]' },
      { id: 2, name: 'Jane Doe', email: '[email protected]'  },
      { id: 3, name: 'Mark Greywood', email: '[email protected]'  },
    ]
  },
  mutations: {},
  actions: {},
  modules: {}
});
现在，我在组件中将state

赋予计算属性，如下所示：

Component：

<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>
我不明白我在做什么错。 

我正在建立一个项目来学习Vuex。我正在商店中创建对象数组，如下所示：Vuex Store：从“ vue”导入Vue；从“ vuex”导入Vuex； Vue.use（Vuex）;导出默认的新Vuex.Store（...

Answer 1

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

Answer 2

更改此