使用 vuex 操作发送的数据 return 未定义

Question

我正在使用带有 vuex 的 axios，我需要使用 json 形式发送数据以执行 post 请求并使用 axios 添加新行，我正在使用 vuex，当动作被触发时它不保留数据并将其发送到操作中，数据 json 是在 vue 组件上创建的，但不要将其发送到操作中以执行 axios post :

Action.js:

export const addClassification = ({data}) => {
    console.log('data actio:', {data})
    axios
    .post("/vendor/classification/save", data, {
        headers: {
            "Content-Type": "application/json",
            //  withCredentials: true //sent with cookie
            Authorization: "Bearer " + Vue.$cookies.get("jwt"),
        }
    })
    .then((res) => {
        console.log('res', res)
        // commit("ADD_TO_CLASSIFICATION", data);
    })
    .catch((err) => {
        console.log(err);
    });

state.js:

export default {
    vendorClassificationList: [],
}

page.vue:

<BaseButton
    label="Modifier"
    classValue="btn-outline-primary"
    @click.native="addClassificationData"
/>

data() {
    return {
        submitStatus: "",
        name: this.$route.params.name,
        id: this.$route.params.id,
        code: this.$route.params.code,
        jsonData:[]
    };
},
methods: {
    ...mapActions(["addClassification"]),
    addClassificationData() {
        this.jsonData = JSON.stringify({
            id: null,
            name: this.name,
            code:this.code,
            active:true
        })
        console.log('json is', this.jsonData)
        this.addClassification({
            data : this.jsonData
        })
    },

Answer 1

Actions 是 Vuex 接收 vuex 上下文作为第一个参数，如你所见in the docs。

换句话说，如果您更改 Action.js：

addClassification = ( {data}) => {

到

addClassification = (vuexContext, {data}) => {

它应该可以解决问题。您可以调用参数 vuexContext、context，在需要时对其进行解构，或者在未使用时调用它 _（如您的情况），只要它存在，这并不重要。

Answer 2

你的 vuex 动作是错误的。您缺少可以使用参数重组的上下文。此外，您可能需要在提交中发送 res.data 而不是 res，具体取决于您在突变中所做的事情。

actions: {
   addClassification ({ commit }, payload) {
      axios
        .post("/vendor/classification/save", payload, {
            headers: {
                "Content-Type": "application/json",
                //  withCredentials: true //sent with cookie
                Authorization: "Bearer " + Vue.$cookies.get("jwt"),
            }
        })
        .then((res) => {
            console.log('res', res)
            commit("ADD_TO_CLASSIFICATION", res.data);
        })
        .catch((err) => {
            console.log(err);
        })
   }
}

使用 vuex 操作发送的数据 return 未定义

data sent with vuex action return undefined

vue.js

vuejs2

vuex

vuex-modules