farm-fresh/src/components/HelloWorld.vue

<template>
    <div>
        <div v-if="!$store.state.player">
            <input type="text" name="username" v-model="playerNameInput"><br>
            <button @click="createNewPlayer">Erstellen</button>
            {{ response }}
        </div>
        <div v-else>
            Hello, {{ $store.state.player.name }}<br>
            <br>
            <button @click="destroyPlayer">Spielstand löschen</button>
        </div>
    </div>
</template>

<script>
export default {
    name: 'HelloWorld',
    data() {
        return {
            playerNameInput: "",
            response: ''
        }
    },
    mounted() {
        this.$store.commit('fetchPlayer');
    },
    methods: {
        createNewPlayer() {
            if (this.playerNameInput.trim().length > 0) {
                this.$store.commit('createNewPlayer', this.playerNameInput);
            } else {
                alert('User name was not provided');
            }
        },
        destroyPlayer() {
            this.$store.commit('destroyPlayer');
        }
    }
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
h3 {
    margin: 40px 0 0;
}

ul {
    list-style-type: none;
    padding: 0;
}

li {
    display: inline-block;
    margin: 0 10px;
}

a {
    color: #42b983;
}
</style>