title: How to send state data via POST request in Vuex?
body: <p><strong>Background</strong>: I have have a Vuex state object called <em>'expense'</em> that is updated via form input fields in a '<em>form component</em>'. I need to send that 'expense' object via POST</p>
  <p><strong>Problem:</strong>  I set up an Action that makes the POST request. However the '<em>expense</em>' object stored in the state is not being sent.</p>
  <p><strong>PS:</strong> The POST request is successful but the response proves that its not sending the data.</p>
  <p><strong>The response data:</strong></p>
  <p><a href="https://i.stack.imgur.com/e2g7G.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/e2g7G.png" alt="enter image description here" /></a></p>
  <p><strong>Store State</strong></p>
  <pre><code>
  const mainURI = &quot;/api/budget&quot;;
  
  const expenseObj = {
    expensesKey: &quot;&quot;,
    expensesValue: null,
    subExpense: null,
  };
  
  export const store = new Vuex.Store({
    state: {
      earnings: null,
      expenses: [
        {
          expensesKey: &quot;&quot;,
          expensesValue: null,
          subExpense: null,
        },
      ],
    },
  </code></pre>
  <p><strong>Store Action</strong></p>
  <pre><code>  actions: {
      addBudget({commit},{ expenses, earnings }) {
        axios
          .post(mainURI, {
            earnings: earnings,
            expenses: expenses,
          })
          .then((res) =&gt; {
            console.log(res.data);
              let newExpense = res.data;
             commit(&quot;SUBMIT_BUDGET&quot;, newExpense);
          });
      },
    },
  </code></pre>
  <p><strong>Store Methods</strong></p>
  <pre><code>  mutations: {
      SUBMIT_BUDGET: (state, payload) =&gt; state.newBudget.push(payload),
      UPDATE_EARNINGS: (state, earnings) =&gt; state.earnings = earnings;
      UPDATE_KEYS(state, payload) {
        Vue.set(
          state.expenses[payload.index],
          &quot;expensesKey&quot;,
          payload.expenseKeyValue
        );
      },
      UPDATE_VALUE(state, payload) {
        Vue.set(
          state.expenses[payload.index],
          &quot;expensesValue&quot;,
          payload.expenseValueValue
        );
      },
    },
  });
  
  </code></pre>
  <p><strong>The form componenet</strong></p>
  <pre><code>computed:{
   earnings: {
        get() {
          return this.$store.state.earnings;
        },
        set(value) {
          this.$store.commit(&quot;UPDATE_EARNINGS&quot;, value);
        },
      },
  },
   methods: {
      submitBudget() {
        this.$store.dispatch(&quot;addBudget&quot;);
        console.log(&quot;triggers&quot;);
      },
      updateKey(event, idx) {
        const val = {
          expenseKeyValue: event.target.value,
          index: idx,
        };
        this.$store.commit(&quot;UPDATE_KEYS&quot;, val);
      },
      updateValue(event, idx) {
        const val = {
          expenseValueValue: event.target.value,
          index: idx,
        };
        this.$store.commit(&quot;UPDATE_VALUE&quot;, val);
      },
    }
  </code></pre>