Vuex：对象数组的元素的形式绑定？

Question

Vuex有令人愉快的文档。 我们在其中了解如何进行2-way binding：

// component.vue
...,
computed: {
  message: {
    get () {
      return this.$store.state.obj.message
    },
    set (value) {
      this.$store.commit('updateMessage', value)
    }
  }
},
...

这很好用，但是如果您想绑定数组对象的属性怎么办？

例如

// state.js
...
listOfThings: [
    {
        text: 'lets bind this',
        value: 0
    },
    {
        text: 'and this is in the $store',
        value: 20
    }
]

并假设我们使用mapState，那么我们可能想要一个组件列表，以便用户可以使用以下方式更新商店：

   

或是实现此目的的唯一方法，方法是使对象的表单绑定成为其自己的组件，并通过prop传递索引，并在表单组件中使用

 text: {
    get () {
      return this.$store.state.listOfThings[this.i].text
    },
    set (value) {
      this.$store.commit('updateText', {i, text: value})
    }
  }