vue.js - Vuex 突变和 Action 不起作用

Question

我是 Vue 和 Vuex 的新手，我正在尝试弄清楚如何改变商店中的数据。

目前在我的州，默认用户名是“default”，我想将其更改为“otto”，稍后我会从数据库中获取此信息。但出于理解的目的，我只是想让它发挥作用。

此时组件已正确加载，并显示“默认”。没有错误。

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>

Answer 1

不要包含您的突变，因为您的操作会调用它。例如，在单击按钮时调用操作:

商店:

// 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，具体取决于请求的作用。

Working jsfiddle