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的{{1}}（计算的属性）。因此，只要商店上的users状态发生变化，users也会被更新。因此，您应该在组件中的计算属性上进行迭代。

因此，迭代应该是

getUser

Answer 2

更改此

public View onCreateView(@NonNull LayoutInflater inflater, @Nullable ViewGroup container, @Nullable Bundle savedInstanceState) {
        return inflater.inflate(R.layout.fragment_radio, container, false);
    }

对此

initializeYoutubePlayer();

使用mapState行，您可以说是一个很好的组件-“嘿，我的store.users在getUsers变量中” 组件不了解“用户”。您没有创建那样的变量。

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

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

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

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

2 个答案: