web-dev-qa-db-fra.com

Les mutations et les actions Vuex ne fonctionnent pas

Je suis nouveau sur Vue et Vuex et j'essaie de comprendre comment muter les données dans le magasin.

Actuellement, dans mon État, le nom d'utilisateur par défaut est "par défaut" et je veux le changer en "otto", plus tard, je ne récupérerai pas ces informations dans la base de données. Mais pour comprendre, j'essaie simplement de faire fonctionner cela.

À ce stade, le composant est correctement chargé et affiche "par défaut". Il n'y a aucune erreur présente.

Le store.js:

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

Le fichier vue:

// 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>
vue.jsvuejs2vue-componentvuex
6
Otto

N'incluez pas votre mutation, car elle sera appelée par votre action. Et appelez l'action sur un clic de bouton par exemple:

Le magasin:

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

Le composant:

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

Conseils supplémentaires: soyez prudent lorsque vous nommez vos mutations et actions. Vous ne voulez pas qu'ils portent le même nom pour éviter les comportements indésirables. Je nomme généralement ma mutation setXXXX et mon action getXXX ou patchXXX en fonction de ce que fait la demande.

Travailler jsfiddle

1
Finrod
<template>
    <div>
        <p @click="changeUsername">{{ username }}</p>

    </div>
</template>

Vous pouvez changer le nom d'utilisateur si l'utilisateur clique sur la balise p comme ça.

0
Thomas