How to loop over an array from the vuex store-CodePudding

I'm using vuex and vuejs 3 and I'm trying to loop over an array from the vuex store butt it keeps throwing an error saying the array is undefined. I tried loging the data and it is working but when using it with the v-for directive it says it's undefined here's the store

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: {
  }
})

and here's the component

<template>
  <div >
    <Task :v-for="Task in $store.state.Tasks" :Task="Task" />
  </div>
</template>

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

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

and the child component ( the one I'm looping)

<template>
<div >
    <input type="checkbox" > {{ 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)```

CodePudding user response：

You need to use set the Tasks state in a computed property to watch the changes happen to the state, it gives error, because the template executes before the Tasks state initialize.

Also, there is another issue which is a naming conflict between the component name Task and the single array item Task.

You need to update the props name to task instead of Task

It would be better to always name your variables as camelCase

<template>
<div >
    <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>