vuex를 사용하여 어레이 상태를 제어하는 방법은 무엇입니까?

vuex를 사용하여 어레이 상태를 제어하는 방법은 무엇입니까?

vuex로 상태 배열을 읽고 싶습니다.
하지만 그것은

"TypeError: 정의되지 않은 속성 '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
      }
    ],
  },

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

그래야 한다

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

하지만 가장 좋은 방법은 게터를 사용하는 것입니다(링크: https://vuex.vuejs.org/guide/getters.html ).

언급URL : https://stackoverflow.com/questions/54576954/how-to-control-array-state-with-vuex