Question

我不知道如何获得它。

我正在尝试在data（）上加载属性（产品），该属性必须从状态中捕获值。

我的组件

    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商店使用相同的对象实例，这似乎可行，但是在这种情况下不起作用，因为在组件stil具有先前实例的情况下，在商店中分配了新的数组实例（空数组）

使用computed properties。我建议使用mapState()助手：

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

没有要编写的mapState：

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

通过异步动作Vuex加载状态

1 个答案: