如何在Vuex中通过POST请求发送状态数据？

Eddie Weldon 发表于 Dev

埃迪·韦尔顿（Eddie Weldon）

背景：我有一个名为“ expense”的Vuex状态对象，该对象通过“表单组件”中的表单输入字段进行更新。我需要通过POST发送“费用”对象

问题：我设置了一个发出POST请求的动作。但是，不会发送存储在状态中的“费用”对象。

PS： POST请求成功，但是响应证明其未发送数据。

响应数据：

储存状态


const mainURI = "/api/budget";

const expenseObj = {
  expensesKey: "",
  expensesValue: null,
  subExpense: null,
};

export const store = new Vuex.Store({
  state: {
    earnings: null,
    expenses: [
      {
        expensesKey: "",
        expensesValue: null,
        subExpense: null,
      },
    ],
  },

商店行动

  actions: {
    addBudget({commit},{ expenses, earnings }) {
      axios
        .post(mainURI, {
          earnings: earnings,
          expenses: expenses,
        })
        .then((res) => {
          console.log(res.data);
            let newExpense = res.data;
           commit("SUBMIT_BUDGET", newExpense);
        });
    },
  },

储存方式

  mutations: {
    SUBMIT_BUDGET: (state, payload) => state.newBudget.push(payload),
    UPDATE_EARNINGS: (state, earnings) => state.earnings = earnings;
    UPDATE_KEYS(state, payload) {
      Vue.set(
        state.expenses[payload.index],
        "expensesKey",
        payload.expenseKeyValue
      );
    },
    UPDATE_VALUE(state, payload) {
      Vue.set(
        state.expenses[payload.index],
        "expensesValue",
        payload.expenseValueValue
      );
    },
  },
});

表格componenet

computed:{
 earnings: {
      get() {
        return this.$store.state.earnings;
      },
      set(value) {
        this.$store.commit("UPDATE_EARNINGS", value);
      },
    },
},
 methods: {
    submitBudget() {
      this.$store.dispatch("addBudget");
      console.log("triggers");
    },
    updateKey(event, idx) {
      const val = {
        expenseKeyValue: event.target.value,
        index: idx,
      };
      this.$store.commit("UPDATE_KEYS", val);
    },
    updateValue(event, idx) {
      const val = {
        expenseValueValue: event.target.value,
        index: idx,
      };
      this.$store.commit("UPDATE_VALUE", val);
    },
  }

和

当您分派addBudget操作时，没有有效负载，例如：

this.$store.dispatch('addBudget', objectPayload);

也许是因为您打算使用earnings和expenses从state。如果是这样，您可以删除有效负载参数并state从操作上下文中进行访问：

actions: {
  addBudget({ state, commit }) {
    axios.post(mainURI, {
      earnings: state.earnings,
      expenses: state.expenses,
    })
    .then((res) => {
      console.log(res.data);
      let newExpense = res.data;
      commit("SUBMIT_BUDGET", newExpense);
    });
  },
},

本文收集自互联网，转载请注明来源。

如有侵权，请联系[email protected] 删除。