약속 확인에서 호출할 때 Vuex 저장소가 업데이트되지 않음

약속 확인에서 호출할 때 Vuex 저장소가 업데이트되지 않음

vuex 데이터스토어에 바인딩된 어레이가 있으며 이 어레이를 통해 계산된 속성으로 표시됩니다.mapGetters헬퍼이 어레이는itemsREST API를 호출하여 REST API를 업데이트 합니다.created()컴포넌트 후크이에 대해 가지고 있는 vuex 액션은 API에 액세스하고 변환자가 호출한 약속을 반환합니다(이를 통해 API가 업데이트됨).items어레이)를 참조해 주세요.약속에 대한 나의 이해는 나에게 나의 나의 생각이then비동기 액션이 완료된 후 콜이 안전하게 발생하지만items어레이가 API 호출에 의해 확실히 채워지고 있음에도 불구하고 약속 해결 방법에서는 비어 있습니다.왜 이게 내 예상대로 안 되지?

코드는 모두 끝났지만 여기 관련 부분이 있습니다.

컴포넌트:

  computed: {
    ...mapGetters({
      items: 'allHistoryItems'
    }),
// ...
  created () {
    this.$store.dispatch('fetchList').then(console.log(this.items))
  }

액션:

  fetchList: ({ commit }) => {
    return new Promise((resolve, reject) => {
      fetchList().then(response => {
        commit(types.FETCH_LIST, response.data)
        resolve(response)
      })
    })
  }

컴포넌트에서 API 응답에 액세스할 수 있지만, 앞서 언급한 바와 같이items비어 있습니다.약속이 해결될 때까지 반응성이 나타나지 않는가?

요컨대

created () {
    this.$store.dispatch('fetchList').then(console.log(this.items))
}

언제created가 호출되어 실행됩니다.

this.$store.dispatch('fetchList')

곧 이어서

console.log(this.items)

그럼, 아무것도 기다리지 말고this.$store.dispatch('fetchList')해결,.then라고 불리고 있다.then(undefined)...왜냐면console.log(this.items)돌아온다undefined

이것을 로 변경하다

created () {
    this.$store.dispatch('fetchList').then(() => console.log(this.items));
}

보너스로 - 약속 생성자 안티 패턴 제거:

fetchList: ({ commit }) => fetchList() 
    .then(response => {
        commit(types.FETCH_LIST, response.data);
        return response;
    }
);

당신의 새로운 Promise 구축은 단순히 불필요한 것이라고 생각합니다.이 간단한 예에서는 원하는 기능을 수행할 수 있는지 여부를 확인합니다.

var store = new Vuex.Store({
  state: {
    hero: []
  },
  mutations: {
    updateHero (state, payload) {

      state.hero = payload
    }
  },
  actions: {
    async loadHero ({commit}, payload) {
      var response = await fetch('https://swapi.co/api/people/1/')
      commit('updateHero', await response.json())
    }
  }
})

new Vue ({
  el: '#app',
  store,
  computed: {
    hero () {
      return this.$store.state.hero
    }
  },
  methods: Vuex.mapActions(['loadHero'])
})

[v-cloak] {
  display: none;
}

<div id="app">
  Hero name is: <span v-cloak>{{ hero.name }}</span><br>
  <button @click="loadHero">Load hero personal data</button>
</div>

<script src="https://unpkg.com/vue"></script>
<script src="https://unpkg.com/vuex"></script>

언급URL : https://stackoverflow.com/questions/47135064/vuex-store-not-updated-when-called-from-promise-resolution