【发布时间】:2020-07-30 13:47:52
【问题描述】:
我正在开发一个 vue 项目,我使用 vuex 来管理状态。我已经定义了状态、动作、突变以及调用动作的调度。但问题是,我在调度附近遇到错误,例如无法读取 Store._callee 未定义的属性 'getProduct'(action name)。
谁能指导我哪里做错了?
这是我的代码:
组件的调度动作:
async created() {
try {
await this.$store.dispatch("getProduct");
} catch (error) {
console.log("Error", error);
}
}
动作代码:
在 ProductService 中,我有执行 API 调用的 getProduct() 函数。
const actions = {
async getProduct({ commit }) {
commit("GET_PRODUCT", await ProductService.getProduct());
}
}
变异代码:
const mutations = {
GET_PRODUCT: (state, product) => {
state.product = product; // Here I am mutating the state
}
}
【问题讨论】:
-
您能否在
getProduct操作的顶部放置console.log(ProductService),以确认它是否被调用以及是否实际定义了ProductService? -
这无关,但这是错误的 commit("GET_PRODUCT", await ProductService.getProduct());提交是同步操作。你需要等待然后提交 const res = await ProductService.getProduct() commit("GET_PRODUCT", res)
-
嗨@skirtle,感谢您的快速回复,您所说的一切正常。
-
@RaduDiță,如果你能看到官方网站,有一个例子 -> 动作:{ async actionA ({ commit }) { commit('gotData', await getData()) }, async actionB ({ dispatch, commit }) { await dispatch('actionA') // 等待
actionA完成 commit('gotOtherData', await getOtherData()) } } -
你是对的,我的错