Vuex 작업 페이로드가 정의되지 않았습니다.

Vuex 작업 페이로드가 정의되지 않았습니다.

다음과 같은 컴포넌트가 있습니다(간소화).

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

저는 더 혼란스럽습니다.왜냐하면 저는 이 프로젝트에서 거의 같은 형식의 행동과 돌연변이를 사용했고 그것들은 효과가 있기 때문입니다.아이디어가 없어서 어떤 입력도 기대됩니다.

고객님의 고객명setVehicleIdentificationNumberVIN을 정수 인수로 전달합니다.

액션에서 param은 오브젝트입니다.{ vin }.

작업 매개 변수를 다음으로 변경합니다.vin또는 컴포넌트 내의 오브젝트를 전달합니다.{ vin: this.vin }

여기서의 문제점은 당신이vin속성을 null 값으로 초기화했기 때문에 반응하지 않지만 개체로 변경합니다.이것을 시험해 보세요.

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

물론, 당신은 할 필요가 있을 것이다.import Vue from 'vue'

다음과 같이 데이터를 작업에 전달해야 합니다.

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

그리고 나중에 데이터 유무에 관계없이 액션을 호출할 수 있습니다.

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

언급URL : https://stackoverflow.com/questions/60975435/vuex-action-payload-is-undefined