gpt4 book ai didi

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

转载 作者:行者123 更新时间:2023-11-30 09:19:30 24 4
gpt4 key购买 nike

我不知道如何让它工作。

我正在尝试在我的 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”,它就有数据了!

我搞砸了。

最佳答案

data() 方法只运行一次。

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

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

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

没有 mapState 你会写:

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

关于javascript - 使用异步 Action Vuex 加载状态,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/52667836/

24 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com