Как перебрать массив объектов, переданных компоненту с помощью Vuex Store и вычисляемого свойства? - PullRequest
Новая
       12

Как перебрать массив объектов, переданных компоненту с помощью Vuex Store и вычисляемого свойства?

0 голосов
/ 03 ноября 2019

Я строю проект для изучения 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: {}
});

Теперь яm доступ к 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>

Я не понимаючто я делаю не так

Ответы [ 2 ]

4 голосов
/ 03 ноября 2019

У вас нет доступа к 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>

1 голос
/ 03 ноября 2019

Измените это 

    <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'

...