如何避免安装和更新 Vue 组件之间的重复

Question

In a Vue application I'm working on I have a number of form components that can be used to either create a new record or amend an existing one. While a form is open, it is also possible to click another record or click create, in which case the contents of the form are replaced or cleared respectively.

The problem I have is that I can't seem to avoid a lot of duplication between my data function and my watch functions.

Here's a simplified example of the kind of thing I mean:

props: ["record"],
data() {
    return {
        name: this.record ? this.record.name : "",
        age: this.record ? this.record.age : null
    };
},
watch: {
    record(record) {
        this.name = record ? record.name : "";
        this.age = record ? record.age : null;
    }
}

Everything I have to do to set up the form when it's mounted has to be done twice: once in the data function to set up the initial reactive properties, and then again in watch for any props that could change. This gets more and more difficult to manage and mistake-prone as the number of properties in the record gets bigger.

Is there any way to keep this setup logic in one place and avoid this duplication?

Answer 1

To resolve the problem add a immediate property to your watcher which will make it call at initialization too. Therefore the initial value of your record property will be handled. Take a look at the code below:

props: ["record"],
data() {
  return {
    name: "",
    age: null
  };
},
watch: {
  record: {
    immediate: true,
    handler(value) {
      this.name = this.record ? this.record.name : "";
      this.age = this.record ? this.record.age : null;
    }
  }
}

Reference: vm.$watch - Vue's Official API

Answer 2

How about this?

props: ["record"],
data() {
    return this.updateRecord(this.record, {});
},
watch: {
    record(record) {
        this.updateRecord(record, this);
    }
},
updateRecord(what, where) {
    where.name = what ? what.name : "";
    where.age = what ? what.age : null;
    return where;
}