How to loop over an array from the vuex store

Question

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

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

<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)```

Answer 1

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