Question

我在Vuex中使用了双向计算属性，而设置器无法正常工作。当我在输入中编写内容时，它只会显示一个字母。下面，我将向您展示如何处理代码。我确实得到了数据。突变存储在存储中，并且与状态相同。

Vue文件：

seek(SeekFrom::End(0))

<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;
}

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);
}

Vuex：设置器不起作用，输入不写？

1 个答案: