javascript - 使用异步操作 Vuex 加载状态
问题描述
我不知道如何让它工作。
我正在尝试在我的 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 存储使用相同的对象实例,这似乎可行,但在这种情况下不起作用,因为在存储中分配了一个新的数组实例,而组件仍然具有前一个实例(空数组)
使用计算属性。我建议使用mapState()助手:
computed: mapState({
productos: state => state.mStock.productos
})
没有 mapState 你会写:
computed: {
productos() {
return this.$store.state.mStock.productos
}
}
推荐阅读
- java - 导入csv文件master(“yarn”)idea、spark、java
- jasper-reports - 如何在 Jaspersoft studio 6.12.2 中制作多个细节带依次打印数据
- java - Gradle - 为项目中的多个 java 程序运行任务
- docker - 在安装在 docker 中的 jenkins 上运行脚本时出错
- php - 我的数据库密码和用户填写的密码,不匹配
- python - 在 python 浮点数组上的 For-Loop
- android - 脱糖后奇怪的包名
- python - 当我提交更新表单时,我的更新视图不起作用,它不会更新表单
- flutter - 测试使用返回 Stream 的反应式存储库的 BLoC
- c# - 用于 RTS 的行星四叉树地形(网格对撞机/寻路问题)