Vuex：Setter 不工作，输入不写？

Question

我在 Vuex 中使用了双向计算属性，setter 不能正常工作。当我在输入中写入时，它当时只显示一个字母。我将在下面向您展示我对代码所做的工作。我确实得到了数据。突变存储在存储中，与状态相同。

Vue 文件：

<div style="padding-bottom: 30px;">
  <input id="phone" v-model="phone" type="text">
</div>

computed: {
  phone: {
    get (): any {
      const contactUsInfo: ContactUsInfo = this.$store.getters['billing/getContactInfo'];
      return contactUsInfo.phone;
    },
    set (phone: any) {
      this.$store.commit('billing/setContactData', phone);
    }
  }
}

突变：

setContactData(state: BillingState, payload: ContactUsInfo) {
  state.contactUsInfo = payload;
}

吸气剂：

getContactInfo(state: BillingState): ContactUsInfo {
  return state.contactUsInfo;
}

Answer 1

您将提交写入存储到contactUsInfo，您存储getter 返回contactUsInfo，但phone getter 尝试返回contactUsInfo.phone。

我觉得应该是这样的：

computed: {
  phone: {
    ...
    set (phone: any) {
      this.$store.commit('billing/setContactData', { phone });
    }
  }
}

setContactData(state: BillingState, payload: ContactUsInfo) {
  state.contactUsInfo = Object.assign({}, state.contactUsInfo, payload);
}