부에즈 페이로드는 돌연변이로 정의되지 않았다.'정의되지 않은 속성을 설정할 수 없음'

부에즈 페이로드는 돌연변이로 정의되지 않았다.'정의되지 않은 속성을 설정할 수 없음'

나는 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"

돌연변이는 그들의 주장을 무너뜨릴 필요가 없다. 그들은 단지 두 개의 개별적인 주장을 통과했을 뿐이다.

그래서 이것 대신에:

setFirstName({ state, fName }) {

쓰기:

setFirstName(state, fName) {

상태가 이미 vuex 저장소의 멤버 모듈에서 적용되고 있으며 createMember 작업이 템플릿에서 호출될 때 전달된 함수 매개 변수의 일부가 아니므로, 이 기능을 해제하지 마십시오.

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

이렇게 구조화하면:

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

당신은 그것을 함수 인수로 취급하고 있고 범위는 변하는데, 이 경우 '상태'라는 주장은 정의되지 않게 된다.그렇기 때문에 'state'에서 'firstName'에 액세스하려고 하면 핸들러가 오류를 발생시킨다.

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

해결책:이미 적용범위에 있으므로 작업에서 상태를 파괴하지 않도록 커밋 및 돌연변이를 방지하십시오.이런 식으로 할 수도 있다.

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

아니면

setFirstName(state, fName}{...}

참조URL: https://stackoverflow.com/questions/57228052/vuejs-payload-is-undefined-in-mutation-cannot-set-property-of-undefined