Vuex action payload is undefined

Question

I have a component that looks like this(simplified):

<script>
import { mapActions } from 'vuex';
import router from '@/router';
import { bindingService } from '@/_services/binding.service';

export default {
    props: {
        serialNumber: { type: String, default: ' ' }
    },
    data: () => ({
        subscriptions: ['Loading...'],
        vin: null,
    }),
    computed: {
        splittedSerialNumber() {
            return this.serialNumber.split(' ')[0];
        }
    },
    created() {
        //fetch some data
        bindingService.fetchSomeData('xxx').then((data) => {
            this.vin = data;
        });        
    },
    methods: {
        ...mapActions('binding', ['setDeviceSerialNumber', 'setVehicleIdentificationNumber']),
        cancel() {
            router.push('/home');
        },
        ok() {
            console.log(this.vin);  //this console.log outputs valid data
            this.setVehicleIdentificationNumber(this.vin);
        },

    },
};
</script>

Then I have my store that look like this(simplified):

const state = {
    vehicleIdentificationNumber: null,
};

const actions = {
  setVehicleIdentificationNumber({ commit }, { vin }) {
        console.log(vin); // this console.log outputs undefined
        commit('SET_VEHICLE_IDENTIFICATION_NUMBER', vin);
    }
};

const mutations = {
SET_VEHICLE_IDENTIFICATION_NUMBER(state, vin) {
        state.vehicleIdentificationNumber = vin;
    },
};

const binding = {
    namespaced: true,
    state,
    actions,
    mutations,
};

export default binding;

I'm even more confused because I've been using pretty much the same format of actions and mutations in this project and they work. I'm out of ideas and looking forward to any kind of input :)

Answer 1

In your setVehicleIdentificationNumber method on the component, you are passing in the vin as an integer argument.

In the action, the param is an object: { vin }.

Change the action param to vin, or pass in an object in the component: { vin: this.vin }

Answer 2

I think the problem here is that your vin property isn't reactive because you initialized it with a null value, but you're changing it to an object. Try this:

bindingService.fetchSomeData('xxx').then((data) => {
   Vue.set(this, 'vin', data)
});

Of course, you'll need to import Vue from 'vue'

Answer 3

You should pass the data to the action like this:

actions: {
    myAction( store, payload = {myCustomKey: 'my value 1'} ){
        store.commit('myCustomMutation', payload.myCustomKey);
    }
}

And later ??u can call the action with or without the data:

this.$store.dispatch('myAction');
this.$store.dispatch('myAction', 'my value 2');