Загрузка состояния с асинхронным действием Vuex - PullRequest
0 голосов
/ 05 октября 2018

Я не могу понять, как это работает.

Я пытаюсь загрузить свойство (productos) в мои данные (), которое должно получить значение из состояния.

Мой компонент:

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

На данный момент я думаю, что все в порядке, когда я загружаю свой компонент, я отправляю свое действие для загрузки состояния в хранилище. Мне кажется, проблема в том, что способ заполнения состояния: ASYNC

Store:

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» в data () равна нулю, однако, если я вижу «state.productos» из devtools Vuex, он содержит данные!

Я запутался.

1 Ответ

0 голосов
/ 05 октября 2018

Метод data () запускается только один раз.

Может показаться, что это работает, если компонент и хранилище vue используют один и тот же экземпляр объекта, но в этом случае не работает, поскольку новый массивэкземпляр присваивается в хранилище, в то время как компонент stil имеет предыдущий экземпляр (пустой массив)

Использовать вычисленные свойства .Я рекомендую использовать mapState () помощник:

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

без mapState, который вы напишите:

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