Как контролировать состояние массива с помощью vuex?

Question

Я хочу прочитать массив состояний по vuex.Но он говорит

"Ошибка типа: невозможно прочитать свойство '0' из неопределенного"

Я предполагаю, что [0] произойдет ошибка.
Вот код ниже.

// the code of index.vue
<template>
  <div><p>{{ rectangles[0].x }}</p></div>
</template>
<script>
  export default {
    computed: {
            rectangles () {
                return this.$store.state.rectangles
            }
    },
  }
</script>

А это магазин vuex.

export default {

  state: {
    rectangles: [
      {
        x: 150,
        y: 100,
        width: 100,
        height: 100,
        fill: "red",
        name: "rect1",
        draggable: true
      },
      {
        x: 150,
        y: 150,
        width: 100,
        height: 100,
        fill: "green",
        name: "rect2",
        draggable: true
      }
    ],
  },

Answer 1

computed: {
            rectangles () {
                return this.$store.rectangles
            }
    },

Должно быть

computed: {
            rectangles () {
                return this.$store.state.rectangles
            }
    },

Но лучше всего использовать геттеры (ссылка: https://vuex.vuejs.org/guide/getters.html)