i wanna the orderID to the mutation cancelOrder then let it do something. heres my code for app.vue

<template>
...codes
<tbody v-for="item in $store.state.orders">
            <tr  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 >
                    <el-button type="danger" @click="cancelOrder(item.orderID)">取消</el-button>
                    <el-button type="success">结账</el-button>
                </td>

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

and heres the method function:

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

heres 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 button, 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? plz help, thx!

CodePudding user response：

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