[FIXED] Why do I pass a number to a mutation but get an object?

Issue

I want the orderID to the mutation cancelOrder then let it do something.
Here is my code for app.vue:

<template>
...codes
<tbody v-for="item in $store.state.orders">
            <tr class="tr-container" v-if="item.status === 0">
                <th scope="row">{{item.orderID}}</th>
                <td>{{item.orderDeskNumber}}</td>
                <td>{{item.orderTime}}</td>
                <td>
                    <p>{{item.orderStuff}}&nbsp;*&nbsp;{{item.orderCount}}</p>
                    <p v-if="item.orderStuff1">{{item.orderStuff1}}&nbsp;*&nbsp;{{item.orderCount1}}
                    </p>
                    <p v-if="item.orderStuff2">{{item.orderStuff2}}&nbsp;*&nbsp;{{item.orderCount2}}
                    </p>
                    <p v-if="item.orderStuff3">{{item.orderStuff3}}&nbsp;*&nbsp;{{item.orderCount3}}
                    </p>
                    <p v-if="item.orderStuff4">{{item.orderStuff4}}&nbsp;*&nbsp;{{item.orderCount4}}
                    </p>
                </td>
                <td class="actions">
                    <el-button type="danger" @click="cancelOrder(item.orderID)">取消</el-button>
                    <el-button type="success">结账</el-button>
                </td>

            </tr>
        </tbody>
...codes

Here is the method function:

cancelOrder(id) {
//console.log('this id is ' + id)
            this.$store.commit('cancelOrder', id)
        }

Here is the mutation code:

async cancelOrder(payload) {
      console.log('i got id from app.vue' + payload)
      await axios.post('someurl', { some params, id: payload }, { timeout: 1000 }).then((res) => {
        console.log('somethin')
      }).catch((err) => {
        console.log('something' + err.message)
      }) */
    },

If I clicked one of those buttons, I found that console outputs are:

this id is 2
i got id from app.vue is [object,Object]
{
    "date": "",
    "orders": [
        {
            "orderID": 1,
            "orderDay": "2022-10-06T16:00:00.000Z",
            "orderTime": "22:43:57",
            "orderDeskNumber": 1,
            "orderStuff": "咖啡1",
            "orderCount": 1,
            "orderStuff1": "咖啡2",
            "orderCount1": 2,
            "orderStuff2": null,
            "orderCount2": null,
            "orderStuff3": null,
            "orderCount3": null,
            "orderStuff4": null,
            "orderCount4": null,
            "amount": null,
            "completeTime": null,
            "cancelTime": null,
            "status": 0
        },
        {
            "orderID": 2,
            "orderDay": "2022-10-06T16:00:00.000Z",
            "orderTime": "22:43:57",
            "orderDeskNumber": 2,
            "orderStuff": "咖啡1",
            "orderCount": 2,
            "orderStuff1": null,
            "orderCount1": null,
            "orderStuff2": null,
            "orderCount2": null,
            "orderStuff3": null,
            "orderCount3": null,
            "orderStuff4": null,
            "orderCount4": null,
            "amount": null,
            "completeTime": null,
            "cancelTime": null,
            "status": 1
        },
        {
            "orderID": 3,
            "orderDay": "1900-01-05T16:23:18.000Z",
            "orderTime": "22:43:57",
            "orderDeskNumber": 2,
            "orderStuff": "咖啡3",
            "orderCount": 4,
            "orderStuff1": null,
            "orderCount1": null,
            "orderStuff2": null,
            "orderCount2": null,
            "orderStuff3": null,
            "orderCount3": null,
            "orderStuff4": null,
            "orderCount4": null,
            "amount": null,
            "completeTime": null,
            "cancelTime": null,
            "status": 2
        },
        {
            "orderID": 4,
            "orderDay": "2022-10-06T16:00:00.000Z",
            "orderTime": "22:43:57",
            "orderDeskNumber": 3,
            "orderStuff": "咖啡4",
            "orderCount": 5,
            "orderStuff1": "咖啡1",
            "orderCount1": 6,
            "orderStuff2": "咖啡2",
            "orderCount2": 10,
            "orderStuff3": null,
            "orderCount3": null,
            "orderStuff4": null,
            "orderCount4": null,
            "amount": null,
            "completeTime": null,
            "cancelTime": null,
            "status": 0
        },
        {
            "orderID": 5,
            "orderDay": "2022-10-06T16:00:00.000Z",
            "orderTime": "22:43:57",
            "orderDeskNumber": 4,
            "orderStuff": "咖啡3",
            "orderCount": 1,
            "orderStuff1": "咖啡1",
            "orderCount1": 5,
            "orderStuff2": null,
            "orderCount2": null,
            "orderStuff3": null,
            "orderCount3": null,
            "orderStuff4": null,
            "orderCount4": null,
            "amount": null,
            "completeTime": null,
            "cancelTime": null,
            "status": 0
        },
        {
            "orderID": 6,
            "orderDay": "2022-10-06T16:00:00.000Z",
            "orderTime": "02:02:10",
            "orderDeskNumber": 1,
            "orderStuff": "咖啡2",
            "orderCount": 5,
            "orderStuff1": "咖啡3",
            "orderCount1": 3,
            "orderStuff2": null,
            "orderCount2": null,
            "orderStuff3": null,
            "orderCount3": null,
            "orderStuff4": null,
            "orderCount4": null,
            "amount": null,
            "completeTime": null,
            "cancelTime": null,
            "status": 0
        }
    ],
    "payload": {}
}

But why? I passed only the number 1 to mutation, but why it got a full object?
Please help, thanks!

Solution

The first parameter of the mutation is the state and the second parameter is what you pass. You have only one parameter so what you are looking at is the state object.

Change async cancelOrder(payload) { to async cancelOrder(state, payload) {

Mutations | Vuex

Answered By - Shoejep

Answer Checked By - David Marino (PHPFixing Volunteer)