web-dev-qa-db-ja.com

Vuexの変異とアクションが機能しない

私はVueおよびVuexを初めて使用し、ストア内のデータを変更する方法を理解しようとしています。

現在の私の状態では、デフォルトのユーザー名は「デフォルト」であり、「オットー」に変更したいのですが、後でデータベースからこの情報を取得します。しかし、理解するために、私はこれを機能させようとしているだけです。

この時点でコンポーネントは正しくロードされ、「デフォルト」と表示されます。エラーはありません。

Store.js：

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

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

アクションによって呼び出されるので、ミューテーションを含めないでください。そして、例えばボタンクリックでアクションを呼び出します：

店舗：

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

コンポーネント：

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

追加のアドバイス：ミューテーションとアクションに名前を付けるときは注意してください。不要な動作を避けるために、それらに同じ名前を付けたくない。私は通常、ミューテーションにsetXXXX、アクションにgetXXXまたはpatchXXXという名前を付けます。

動作中のjsfiddle

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

    </div>
</template>

ユーザーがそのようなpタグをクリックすると、ユーザー名を変更できます。

0
Thomas