Полезная нагрузка действия Vuex не определена

Question

У меня есть компонент, который выглядит так (упрощенно):

<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>

Тогда у меня есть магазин, который выглядит так (упрощенно):

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;

Я даже более запутанный, потому что я использовал почти тот же формат действий и мутаций в этом проекте, и они работают. У меня нет идей, и я с нетерпением жду любой информации:)

Answer 1

В вашем методе setVehicleIdentificationNumber компонента вы передаете vin как целочисленный аргумент.

В действии параметр является объектом: { vin }.

Измените параметр действия на vin или передайте объект в компоненте: { vin: this.vin }

Answer 2

Я думаю, что проблема в том, что ваше свойство vin не является реактивным, потому что вы инициализировали его нулевым значением, но вы изменили его на объект. Попробуйте это:

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

Конечно, вам нужно будет import Vue from 'vue'