Question

我想通过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
      }
    ],
  },

Answer 1

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

应该是

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

但是最好的方法是使用吸气剂（链接：https://vuex.vuejs.org/guide/getters.html）

如何使用vuex控制数组状态？

1 个答案: