javascript - 使用异步 Action Vuex 加载状态

Question

我不知道如何让它工作。

我正在尝试在我的 data() 上加载一个属性 (productos)，它必须从状态中获取值。

我的组件:

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

此时我认为没问题，当我加载我的组件时，我会发送我的操作来加载商店中的状态。 我认为问题在于我填充状态的方式是ASYNC

商店:

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})
    }
  }
}

当我加载我的组件时，data() 上的属性“productos”为空，但是如果我从 Vuex devtools 中看到“state.productos”，它就有数据了!

我搞砸了。

Answer 1

data() 方法只运行一次。

如果组件和 vue 存储使用相同的对象实例，这似乎可行，但在这种情况下不起作用，因为在存储中分配了一个新的数组实例，而组件仍然具有先前的实例(空数组)

使用computed properties .我建议使用 mapState()助手:

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

没有 mapState 你会写:

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