Vuejs2 在Vuex中的对象数组上使用v-bind

我正在尝试将用户输入从表单绑定到vuex存储中的状态

该州的情况如下：

customers: [
  {firstName: "", lastName: "", age: ""},
  {firstName: "", lastName: "", age: ""},
  {firstName: "", lastName: "", age: ""}
]

computed: {
  firstName: {
    get () {
      return this.$store.state.customers[i].firstName
    },
    set (value) {
      this.$store.commit('changeFirstname', {value, index})
    }
  }
}

我尝试在调用get和set方法的计算属性上使用v-model。我找到了一个解释

这对对象非常有效，但遗憾的是，没有解释如何在对象数组中使用它

我在找这样的东西：

customers: [
  {firstName: "", lastName: "", age: ""},
  {firstName: "", lastName: "", age: ""},
  {firstName: "", lastName: "", age: ""}
]

computed: {
  firstName: {
    get () {
      return this.$store.state.customers[i].firstName
    },
    set (value) {
      this.$store.commit('changeFirstname', {value, index})
    }
  }
}

但很明显，这不起作用，因为我无法将索引传递给计算属性。 有人能解决这个问题吗？对于深度观察者来说，这是一个很好的用例吗

---

这是我的第一个问题，如果我忘记了什么或做错了什么，请告诉我，这样我可以提高我的提问。谢谢

当您的数据不平坦时，Vuex可能会有点麻烦。更多信息请参见

一种方法是抛弃

v型

，直接使用

:value

和

@input

。在我的示例中，我模拟了一家商店，但希望它能清楚地说明发生了什么。如果您发现这比传递对象本身更容易，那么您可以轻松地获取客户的索引

const storeCustomers=Vue.observable([
{姓：“A”，姓：，年龄：}，
{姓氏：“B”，姓氏：，年龄：}，
{姓：“C”，姓：，年龄：}
])
函数storeGetCustomers（）{
退货商店客户
}
函数storeUpdateCustomerFirstName（客户，值）{
customer.firstName=value
}
新Vue({
el:“#应用程序”，
计算：{
客户（）{
return storeGetCustomers（）
}
},
方法：{
onFirstNameInput（客户、价值）{
storeUpdateCustomerFirstName（客户、价值）
}
}
})

{{客户}

感谢您的精彩解释@skirtle！我感谢你的时间和努力。我遵循了你的第二个建议，它工作得很好。这是一些天才代码。这对我帮助很大。非常感谢。