Vuex: 세터가 작동하지 않고 입력이 기록되지 않습니까?

Vuex: 세터가 작동하지 않고 입력이 기록되지 않습니까?

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

커밋 쓰기를 저장할 위치contactUsInfo당신은 게터 리턴을 저장합니다.contactUsInfo,그렇지만phoneGetter가 복귀를 시도합니다.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);
}

언급URL : https://stackoverflow.com/questions/54303586/vuex-setter-is-not-working-and-input-doesnt-write