Vuex: Setter не работает и ввод не пишет?

Question

Я использовал двустороннее вычисляемое свойство в Vuex, и сеттер не работает должным образом. Когда я пишу внутри ввода, он просто показывает одну букву за раз. Я покажу вам, что я сделал с кодом ниже. Я действительно получаю данные. Мутация хранится в магазине и совпадает с состоянием.

Файл 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, вы сохраняете геттерные возвраты contactUsInfo, но phone геттер пытается вернуть 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);
}