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

在组件的{ vin }方法中，您将vin作为整数参数传递。

在操作中，参数是一个对象：vin。

将操作参数更改为{ vin: this.vin }，或传入组件中的对象：{{1}}

Answer 2

我认为这里的问题是您的vin属性没有反应性，因为您使用空值对其进行了初始化，但是您将其更改为对象。试试这个：

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

当然，您需要import Vue from 'vue'

Vuex动作有效载荷未定义

2 个答案: