Vuex调用Action传递数据返回undefined，axios POST请求传参失败

核心问题原因 #

• Vuex Action的第一个参数是固定的上下文对象（包含commit、state、dispatch等内置属性），你传递的自定义参数是第二个入参，原代码错误地从第一个参数里解构data，导致拿不到传递的值
• 手动JSON.stringify序列化数据属于冗余操作，axios默认会处理JS对象到JSON的转换，额外序列化反而可能导致后端解析异常

修复后的代码 #

1. Action.js 修正 #

// 第一个参数是context上下文，第二个参数是你传递的payload对象
export const addClassification = ({ commit }, payload) => {
    const { data } = payload
    console.log('data actio:', data)
    axios
    .post("/vendor/classification/save", data, {
        headers: {
            Authorization: "Bearer " + Vue.$cookies.get("jwt"),
        }
    })
    .then((res) => {
        console.log('res', res)
        // 需要提交mutation的话直接调用commit即可
        // commit("ADD_TO_CLASSIFICATION", data);
    })
    .catch((err) => {
        console.log(err);
    });
}

2. page.vue 逻辑部分优化（移除冗余的JSON序列化） #

data() {
    return {
        submitStatus: "",
        name: this.$route.params.name,
        id: this.$route.params.id,
        code: this.$route.params.code,
        jsonData:[]
    };
},
methods: {
    ...mapActions(["addClassification"]),
    addClassificationData() {
        // 直接传JS对象即可，不需要JSON.stringify
        const submitData = {
            id: null,
            name: this.name,
            code:this.code,
            active:true
        }
        console.log('submit data is', submitData)
        this.addClassification({
            data : submitData
        })
    }
}

补充说明 #

如果你的接口确实要求接收字符串类型的请求体，保留JSON.stringify操作也可以，只要保证Action的参数结构正确即可正常拿到传递的data值。

内容的提问来源于stack exchange，提问作者albertyaz