Vuex mutations and actions not working

Question

I'm new to Vue and Vuex and I'm trying to figure out how to mutate data in the store.

Currently in my State the default username is 'default' and I want to change it to 'otto', later ill grab this information from the database. But for the purpose of understanding I'm just trying to get this to work.

At this point the component is loaded correctly, and it displays 'default'. There are no errors present.

The store.js:

// store.js 
export default {
    state: {
        username: 'default'
    },
    getters: {
    },
    mutations: {
        changeUsername (state) {
            state.username = 'otto'
        }
    },
    actions: {
        changeUsername (context) {
            context.commit('changeUsername')
        }
    }
}

The vue file:

// Basic.vue
<template>
    <div>
        <p>{{ username }}</p>

    </div>
</template>

<script>
    import { mapState } from 'vuex';
    import { mapMutations } from 'vuex';
    import { mapActions } from 'vuex';


    export default {
        name: "basic",

        computed: {
            ...mapState([
                'username'
            ])
        },
        methods: {
            ...mapMutations([
                'changeUsername'
            ]),
            ...mapActions([
                'changeUsername'
            ])
        }
    }
</script>

Answer 1

Don't include your mutation, as it will be called by your action. And call the action on a button click for instance:

The store:

// store.js 
export default {
    state: {
        username: 'default'
    },
    getters: {
        username: state => state.username
    },
    mutations: {
        setUsername (state) {
            state.username = 'otto'
        }
    },
    actions: {
        updateUsername (context) {
            context.commit('setUsername ')
        }
    }
}

The component:

// Basic.vue
<template>
    <div>
        <p>{{ username }}</p>
        <button @click="updateUsername">Change!</button>
    </div>
</template>

<script>
    export default {
        name: "basic",

        computed: {
            username() {
                return this.$store.getters.username
            }
        },
        methods: {
            updateUsername() {
                this.$store.dispatch('updateUsername')
            }
        }
    }
</script>

Additionnal advice: be carefull when naming your mutations and actions. You don't want them to have the same name to avoid unwanted behaviors. I usually name my mutation setXXXX and my action getXXX or patchXXX depending of what the request does.

Working jsfiddle