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

Posted 2023-02-22

【中文标题】如何在 Vuex 中通过 POST 请求发送状态数据？

【英文标题】：How to send state data via POST request in Vuex?

【发布时间】：2021-06-09 06:12:14

【问题描述】：

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

问题：我设置了一个发出 POST 请求的操作。但是存储在状态中的“expense”对象没有被发送。

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);
    ,
  

【问题讨论】：

响应无法证明发送的内容。而是检查开发工具中的“网络”选项卡以查看发送的确切内容。

在发送 POST 的“addBudget”操作中，您是否验证过“收入”和“费用”包含您假设的值？此外，请考虑修改您的“addBudget”操作以将“收入”和“费用”作为有效负载。最后，我在控制台日志中看到一个关于使用组件 id 'form' 的 Vue 警告。不确定这是否会导致问题。

@shob 感谢您的回复！当我检查网络时，我给了我 200 的状态，但请求有效负载为空

@Tim 感谢您的反馈！在我检查网络后，没有任何东西被发送。所以我认为问题在于“收益”和“费用”不包含这些值。让我感到困惑的是，在 Vue DevTools 中，当用户在表单中输入后，它们会得到更新。如何将这些状态属性作为有效负载？

【参考方案1】：

当您调度addBudget 操作时，没有有效负载，例如：

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

这可能是因为您打算使用来自state 的earnings 和expenses。如果是这样，您可以删除有效负载参数并从操作上下文中访问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);
    );
  ,
,