Vuex에서 POST 요청을 통해 상태 데이터를 전송하는 방법

Vuex에서 POST 요청을 통해 상태 데이터를 전송하는 방법

배경:'양식 구성 요소'의 양식 입력 필드를 통해 업데이트되는 '비용'이라는 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
      );
    },
  },
});

양식 구성 요소넷

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다음과 같은 payload는 없습니다.

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

아마도 그건 네가 이 모든 것들을 사용하려고 하기 때문일 것이다.earnings그리고.expenses부터state이 경우 payload 인수를 삭제하고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);
    });
  },
},

언급URL : https://stackoverflow.com/questions/66579358/how-to-send-state-data-via-post-request-in-vuex