Question

我正在VueJs中创建一个项目，用户在其中输入社区中某个成员的一些简要信息，并将其添加到列表（数据库）中。

问题是我的变量setFirstName，setLastName等未获得有效负载，结果却是未定义的，这会导致更多错误。很抱歉，如果我没有解释正确的内容或代码没有意义，那么我在前端框架上真的很陌生，所以只想学习。

存储文件：

export default {
    namespaced: true,
    state: {
        members: [],
        firstName: null,
        lastName: null,
        birthYear: null,
    },

    actions: {
        createMember({ commit, state }) {
            return HTTP().post('/member', {
                firstName: state.firstName,
                lastName: state.lastName,
                birthYear: state.birthYear,
            })
            .then(({ data }) => {
                commit('appendMember', data);
                commit('setFirstName', null);
                commit('setLastName', null);
                commit('setBirthYear', null);
            });
        },
    },

    mutations: {
        setFirstName({ state, fName }) {
            state.firstName = fName;
        },
        setLastName({ state, lName }) {
            state.lastName = lName;
        },
        setBirthYear({ state, bYear }) {
            state.birthYear = bYear;
        },
        appendMember({ state, member }) {
            state.members.push(member);
        },
    },
};

查看文件

<template>
    <v-app>
        <div>
            <h1>Create Member</h1>
            <v-layout justify-center>
                <v-flex xs1>
                    <v-text-field
                    placeholder="First Name"
                    :value="firstName"
                    @input="setFirstName"></v-text-field>
                </v-flex>
                <v-flex xs2>
                    <v-text-field
                    placeholder="Last Name"
                    :value="lastName"
                    @input="setLastName"></v-text-field>
                </v-flex>
                <v-flex xs1>
                    <v-text-field
                    placeholder="Year of birth"
                    :value="birthYear"
                    @input="setBirthYear"></v-text-field>
                </v-flex>
                <v-flex xs1>
                    <v-btn @click="createMember">Create</v-btn>
                </v-flex>
            </v-layout>
        </div>
        <div>
            <Members></Members>
        </div>
    </v-app>
</template>

<script>
import { mapMutations, mapState, mapActions } from 'vuex';
import Members from '../components/Members.vue';

export default {
    components: {
        Members,
    },
    computed: {
        ...mapState('members', [
            'firstName',
            'lastName',
            'birthYear',
            'members',
        ]),
    },
    methods: {
        ...mapMutations('members', [
            'setFirstName',
            'setLastName',
            'setBirthYear',
        ]),
        ...mapActions('members', [
            'createMember',
        ]),
    },
};
</script>

<style>

</style>

因此，我希望在输入突变中输入某些内容后，这些值会自动设置为状态变量。但是我得到了这个Error in v-on handler: "TypeError: Cannot set property 'firstName' of undefined"

Answer 1

静音不需要对其参数进行破坏，只需传递两个单独的参数即可。

所以代替这个：

setFirstName({ state, fName }) {

写：

setFirstName(state, fName) {

Answer 2

状态已经在vuex存储中的members模块中，并且不在模板中调用createMember动作时传递的函数参数的一部分内，因此您不应该对其进行破坏。

// src/store/members
export default {
    namespaced: true,
    state: {
        members: [],
        firstName: null,
        lastName: null,
        birthYear: null,
    },

当您按如下方式对其进行破坏时：

setFirstName({state, fName}){...}

您将其视为函数参数，并且范围发生了变化，在这种情况下，参数“ state”变为未定义。这就是为什么当您尝试访问“状态”上的“名字”时，处理程序会引发错误

Error in v-on handler: "TypeError: Cannot set property 'firstName' of undefined"

解决方案：：避免破坏动作提交和变异中的状态，因为它已经在范围之内。您可以通过以下方式进行操作：

setFirstName(state, {fName}}{...}

或

setFirstName(state, fName}{...}

Vuejs有效载荷在突变中未定义。 “无法设置未定义的属性”

2 个答案: