首页 文章

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

提问于
浏览 次
0

我有一个Vue组件，它将根据用户之前在前一个组件中单击的内容显示数据 . 当他们最初点击时，我设置'当前'索引 . 然后，当他们到达下一页时，我有一个将在数据数组中查找并返回“当前”数据的getter .

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

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

HTML

<input type="text" class="form-control" id="nickname1" v-model="name" name="name">
<input type="text" class="form-control" id="address1" placeholder="" v-model="address" name="address" > 
<input type="text" class="form-control" id="city1" placeholder="" v-model="city" name="city" >

VUE

data: function() {
    return {
        name: this.currentArea.title,
        address: this.currentArea.address,
        city: this.currentArea.city,
        state: this.currentArea.state
    }
},
computed: {
    currentArea() { return this.$store.getters.currentArea }
}
  • this.currentArea.title和currentArea.title不起作用 .

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

data-binding vue.js vuex

2 回答

  • 1

    data 方法仅在初始化期间，在设置计算属性之前触发一次 . 因此，在 data 方法中引用 currentArea 将不起作用，因为它在执行时将是 undefined .

    如果预期 this.$store.getters.currentArea 在此组件的生命周期内不会发生变化，那么在 mounted 钩子中设置一次数据属性最简单：

    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 相同，则可以直接在 data 方法中返回 this.$store.getters.currentArea ：

    data() {
  return this.$store.getters.currentArea;
}
    回复于
  • 6

    @thanksd：谢谢你的回答 . 我正在开发一个场景，其中状态存储在vuex中，暂时发送不完整到组件，然后通过提取更新 . 它应该可以在一个表单中编辑 .

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

    getters: {
  getItemDetail: (state, getters) => (id) => {
    let item = state.openedItems.items.find(i => i.id === id);
    return item ? item.data : null;
  }
}

    通过组合数据，计算和监视属性在组件中使用它（并在lodash的帮助下深度克隆对象）：

    data () {
  return {
    itemDetail: null
  };
},
computed: {
  itemData () {
    return this.$store.getters.getItemDetail(this.item.id);
  }
},
watch: {
  itemData (n, o) {
    this.itemDetail = _.cloneDeep(n);
  }
}

    最后，我将输入绑定到“itemDetail”（在我的示例中使用elemen开关）：

    <el-switch v-model="itemDetail.property"></el-switch>

    对我来说（但我对Vue来说还很陌生），这似乎是一个很好的工作妥协 .

    回复于

相关问题