vuex API 요청에서 Vue 구성 요소의 데이터 초기화

vuex API 요청에서 Vue 구성 요소의 데이터 초기화

vuex 저장소의 비동기 API 호출에서 Vue 구성 요소의 데이터를 초기화하는 가장 간단한 방법은 무엇입니까?데이터를 사용하기 전에 구성 요소가 마운트됩니다.

고려사항:

export default {
data () {
  return {
    loanAmount: 300000,
    thirtyFixedAPR: null,
    fifteenFixedAPR: null,
    fiveArmAPR: null
  }
},
methods: {
  fetchRates () {
    this.thirtyFixedAPR = this.$store.state.rates.thirtyFixed.apr
    this.fifteenFixedAPR = this.$store.state.rates.fifteenFixed.apr
    this.fiveArmAPR = this.$store.state.rates.fiveArm.apr
  }
},
mounted () {
  this.fetchRates()
}}

vuex 스토어의 api 호출이 종료된 후 fetchRates 메서드를 호출하고 싶습니다.계산된 속성을 사용하지만 데이터를 초기화할 뿐 시청할 수는 없습니다.저는 별로 우아해 보이지 않는 관찰자를 사용하여 몇 가지 회피책을 실험해 보았는데, 이에 대한 더 간단한 해답이 있을 것 같습니다.

도와줘서 고맙습니다.

Vuex에서 구독을 사용해야 합니다.

기본적으로는

const myMutationListener = this.$store.subscribe((mutation, state) => {
  if (mutation.type === 'MY_MUTATION_INSIDE_VUEX'){
   this.parameter1 = mutation.payload.parameter1
   this.parameter2 = mutation.payload.parameter2
  }
})

언급URL : https://stackoverflow.com/questions/48197051/initialize-data-in-vue-component-from-vuex-api-request