비동기 작업 Vuex로 상태 로드

비동기 작업 Vuex로 상태 로드

어떻게 해야 효과가 있는지 알 수 없다.

데이터()에 상태 값을 입력해야 하는 적절한 타이(제품)를 로드하려고 한다.

내 구성 요소:

    data () {
        return {
          productos: this.$store.state.mStock.productos
        }
     },
  created() {
    this.$store.dispatch('fetchProductos')
  }

이 시점에서 나는 내 부품을 적재할 때 내 조치를 취해서 상점에 국가를 적재한다.문제는 내가 국가를 채우는 방식이 비동기식이라는 것이다.

저장:

import StockService from '@/services/StockService'

export const moduleStock = {
  strict: false,
  state: {
    productos: []
  },
  mutations: {
    setProductos (state, payload) {
      state.productos = payload.productos
    }
  },
  actions: {
    async fetchProductos ({commit}, payload) {
      const resp = await (StockService.getProductos())
      var productos = resp.data
      commit('setProductos', {productos: productos})
    }
  }
}

구성 요소를 로드할 때 데이터의 적절한 타이 "productos"가 null이지만 Vuex devtools의 'state.productos'를 보면 데이터가 있는 것이다!

나 완전 엉망이야.

데이터() 방법은 한 번만 실행된다.

구성 요소와 vue 스토어가 동일한 개체 인스턴스를 사용할 때 구성 요소 stil에 이전 인스턴스(빈 어레이)가 있는 동안 저장소에 새 어레이 인스턴스가 할당되어 이 경우 작동하지 않는 경우 이 문제가 해결되는 것처럼 보일 수 있음

계산된 속성을 사용하십시오.mapState() 도우미를 사용할 것을 권장한다.

computed: mapState({
  productos: state => state.mStock.productos
})

mapState 없이 다음과 같이 쓸 수 있음:

computed: {
  productos() {
    return this.$store.state.mStock.productos
  }
}

참조URL: https://stackoverflow.com/questions/52667836/load-state-with-async-action-vuex