Vuex突变和操作不起作用

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

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

    </div>
</template>

如果用户像这样单击 p 标签，您可以更改用户名。