我的组件 vue 像这样:
<template>
...
</template>
<script>
import {mapActions, mapGetters} from 'vuex'
export default {
...
methods: {
add(event) {
this.addProduct(this.filters)
console.log(this.getStatusAddProduct)
if(this.getStatusAddProduct) {
...
}
},
...mapActions(['addProduct'])
},
computed: {
...mapGetters(['getStatusAddProduct'])
}
}
</script>
这段代码:this.addProduct(this.filters)
,它将调用vuex模块中的addProduct方法
我的模块 vuex 像这样:
import { set } from 'vue'
import product from '../../api/product'
import * as types from '../mutation-types'
// initial state
const state = {
statusAddProduct: null
}
// getters
const getters = {
getStatusAddProduct: state => state.statusAddProduct
}
// actions
const actions = {
addProduct ({ dispatch, commit, state }, payload)
{
product.add(payload,
data => {
commit(types.ADD_PRODUCT_SUCCESS)
},
errors => {
commit(types.ADD_PRODUCT_FAILURE)
}
}
}
}
// mutations
const mutations = {
[types.ADD_PRODUCT_SUCCESS] (state){
state.statusAddProduct = true
},
[types.ADD_PRODUCT_FAILURE] (state){
state.statusAddProduct = false
}
}
export default {
state,
getters,
actions,
mutations
}
这段代码:product.add(payload,
在vuex模块中,它将调用api
API 像这样:
import Vue from 'vue'
export default {
add (filter, cb, ecb = null ) {
axios.post('/member/product/store', filter)
.then(response => cb(response))
.catch(error => ecb(error))
}
}
我的问题是,如果运行 vue 组件中的 add 方法,console.log(this.getStatusAddProduct)
的结果为 null。如果产品添加成功,则 console.log(this.getStatusAddProduct)
的结果为 true
我认为发生这种情况是因为在运行 console.log(this.getStatusAddProduct)
时,在 vuex 模块中添加产品的过程尚未完成。所以结果为空
当 vuex 模块中的进程完成时,如何使 console.log(this.getStatusAddProduct)
运行?
最佳答案
您必须从 .add()
方法一路向下传递该属性。
您可以通过在中间方法中返回它并最后使用 .then()
来实现这一点。
API:
add (filter, cb, ecb = null ) {
return axios.post('/member/product/store', filter) // added return
.then(response => cb(response))
.catch(error => ecb(error))
}
并且,操作
:
addProduct ({ dispatch, commit, state }, payload) // added return
{
return product.add(payload,
data => {
commit(types.ADD_PRODUCT_SUCCESS)
},
errors => {
commit(types.ADD_PRODUCT_FAILURE)
}
}
}
最后:
methods: {
add(event) {
this.addProduct(this.filters).then(() => { // added then
console.log(this.getStatusAddProduct) // moved inside then
if(this.getStatusAddProduct) {
...
}
})
},
关于vue.js - 如何通过 vue 组件中的 vuex 存储获取响应 ajax?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/49503251/