Data binding 如何将数据属性设置为从Vuex getter返回的值

我有一个Vue组件，它将根据用户以前在以前的组件中单击的内容显示数据。当他们最初单击时，我设置了“当前”索引。然后，当他们进入下一页时，我有一个getter，它将查看数据数组并返回“当前”数据

他们重定向到的组件是他们可以编辑的表单。我希望能够预先填充“当前”数据。不是作为占位符，而是作为实际值，以便他们可以直接编辑它

问题是我不知道如何将getter返回的值设置为数据函数值，以便它们可以与v-model绑定

HTML

*此.currentArea.title和currentArea.title不起作用

---

*如果绑定占位符，数据将正确显示，因此getter函数将正确返回currentArea

在初始化期间，在设置计算属性之前，

data

方法只触发一次。因此，从

data

方法中引用

currentArea

将不起作用，因为它在执行时是

未定义的

如果
this.$store.getters.currentArea
预计在此组件的使用寿命内不会发生更改，则最简单的方法是在
挂载的挂钩中设置一次数据属性：

data() {
  return {
    name: '',
    address: '',
    city: '',
    state: ''
  }
},
mounted() {
  let area = this.$store.getters.currentArea;
  this.name = area.name;
  this.address = area.address;
  this.city = area.city;
  this.state = area.state;       
} 


或者，如果您知道此组件的数据属性将始终与
currentArea
相同，则可以直接在
数据
方法中返回
this.$store.getters.currentArea
：

data() {
  return this.$store.getters.currentArea;
}

@谢谢你的回答。
我正在处理一个场景，其中状态存储在vuex中，暂时不完整地发送到组件，然后通过获取更新。
并且它应该可以在表单中编辑

我的解决方案是在vuex中使用getter导出部分状态：


getter：{
getItemDetail：（状态，获取者）=>（id）=>{
让item=state.openedItems.items.find（i=>i.id==id）；
退货项目？项目数据：空；
}
}
非常好的答案，它现在工作得非常好。谢谢你的帮助！相反，如果这个.store.getters.currentArea预期会更改？@MatteoPiazza，则使用计算属性。为什么不创建？你能解释一下吗？这已经困扰了我一周了，而你的答案最终帮助了我——非常感谢！这也是我提出的解决方案，但直到我在这里找到它，我才觉得这是最好的解决方案。谢谢你做我的安全毯
data() {
  return {
    name: '',
    address: '',
    city: '',
    state: ''
  }
},
mounted() {
  let area = this.$store.getters.currentArea;
  this.name = area.name;
  this.address = area.address;
  this.city = area.city;
  this.state = area.state;       
} 

data() {
  return this.$store.getters.currentArea;
}