Vuejs payload is undefined in mutation. 'Cannot set property of undefined'

Question

I'm making a project in VueJs where user inputs some brief information of a member in a community and it adds it to the list(database).

The problem is that my mutations setFirstName, setLastName, etc. don't get the payload and it turns out to be undefined which makes more errors. I'm sorry if I didn't explain something right or code makes no sense, i'm really new at front-end frameworks so just trying to learn.

Store file:

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);
        },
    },
};

View file

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

So I expected when something is entered in the input mutations would automatically set those values to state variables. But instead i get this Error in v-on handler: "TypeError: Cannot set property 'firstName' of undefined"

Answer 1

The state is already in scope in the members module in your vuex store and not part of the function parameters passed when the createMember action was invoked in your template, therefore you should not destructure it.

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

When you destructure it like this:

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

You are treating it as a function argument and the scope changes, and in this case, the argument 'state' becomes undefined. That is why when you try accessing 'firstName' on 'state', the handler throws the error

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

Solution: Avoid destructuring the state in your action commits and mutations since it is already in scope. You can either do it this way:

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

Or

setFirstName(state, fName}{...}

Answer 2

Mutations don't need the destructuring on their arguments, they're just passed two separate arguments.

So instead of this:

setFirstName({ state, fName }) {

write:

setFirstName(state, fName) {