如何从 vuex 存储中循环遍历数组答案

【问题标题】：How to loop over an array from the vuex store如何从 vuex 存储中循环遍历数组
【发布时间】：2022-08-03 22:00:44
【问题描述】：

我正在使用 vuex 和 vuejs 3，我试图从 vuex 存储库中循环一个数组，但它不断抛出一个错误，说数组未定义。我尝试记录数据并且它正在工作，但是当它与 v-for 指令一起使用时，它说它是未定义的这里是商店

import { createStore } from \'vuex\'

export default createStore({
  state: {
    AddTaskShown: false,
    Tasks: []
  },
  getters: {
  },
  mutations: {
      ToggleAddTask(state) {
      state.AddTaskShown = !state.AddTaskShown;
    },
    addTask(st, {name, description, date }) {
      st.Tasks = [...st.Tasks, {name, description, date}]
    },
  },
  actions: {
  },
  modules: {
  }
})

这是组件

<template>
  <div class=\"grid grid-cols-1 gap-1 py-3\">
    <Task :v-for=\"Task in $store.state.Tasks\" :Task=\"Task\" />
  </div>
</template>

<script>
import Task from \"@/components/Task.vue\";

export default {
  components: {
    Task,
  },
};
</script>

和子组件（我正在循环的那个）

<template>
<div class=\"mx-5 my-1 bg-slate-700 p-4 text-white rounded-lg\">
    <input type=\"checkbox\" class=\"w-4 h-4 mr-2\"> {{ Task.name }}
</div>
</template>
<script>
export default {
  name: \"Task\",
  props: {
    Task: Object,
  },
};
</script>```
and it gives me an error saying
```Task.vue?c155:2 Uncaught (in promise) TypeError: Cannot read properties of undefined (reading \'name\')
    at Proxy.render (Task.vue?c155:2:1)
    at renderComponentRoot (runtime-core.esm-bundler.js?d2dd:896:1)
    at ReactiveEffect.componentUpdateFn [as fn] (runtime-core.esm-bundler.js?d2dd:5580:1)
    at ReactiveEffect.run (reactivity.esm-bundler.js?89dc:185:1)
    at instance.update (runtime-core.esm-bundler.js?d2dd:5694:1)
    at setupRenderEffect (runtime-core.esm-bundler.js?d2dd:5708:1)
    at mountComponent (runtime-core.esm-bundler.js?d2dd:5490:1)
    at processComponent (runtime-core.esm-bundler.js?d2dd:5448:1)
    at patch (runtime-core.esm-bundler.js?d2dd:5038:1)
    at mountChildren (runtime-core.esm-bundler.js?d2dd:5234:1)```

标签： javascript arrays vuex vuejs3

【解决方案1】：

您需要使用在computed 属性中设置Tasks state 来观察state 发生的变化，它会给出错误，因为模板在Tasks 状态初始化之前执行。

<template>
<div class="grid grid-cols-1 gap-1 py-3">
    <Task :v-for="Task in Tasks" :Task="Task" />
  </div>
</template>

<script>
import Task from "@/components/Task.vue";

export default {
  components: {
    Task,
  },
  computed: {
     Tasks() {
         return this.$store.state.Tasks
     }
  }
};
</script>

【讨论】：