如何在 vue 组件中通过 vuex store 获得响应 ajax？

Question

我的组件 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组件运行中添加方法，console.log(this.getStatusAddProduct)的结果是null。如果产品添加成功，console.log(this.getStatusAddProduct) 的结果应该是 true

我认为发生这种情况是因为在运行 console.log(this.getStatusAddProduct) 时，在 vuex 模块中添加产品的过程尚未完成。所以结果为空

vuex模块中的进程已经完成，如何让console.log(this.getStatusAddProduct)运行？

Answer 1

您必须从 .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))
}

而且，action：

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 组件中通过 vuex store 获得响应 ajax？

How can I get response ajax by vuex store in the vue component?

vue.js

vuejs2

vue-component

vuex

vuex-modules