farm-fresh/src/components/HelloWorld.vue

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

<script>
import axios from "axios";

export default {
    name: 'HelloWorld',
    data() {
        return {
            userNameInput: "",
            response: ''
        }
    },
    mounted() {
        this.$store.commit('fetchUser');
    },
    methods: {
        createNewPlayer() {
            let component = this;

            axios.post('http://api.luna-development.net/api/player/create', {
                name: this.userNameInput.trim(),
                game_id: 1
            }).then((response) => {
                console.log(response);
                component.response = response.data;
                localStorage.setItem('farmfresh_uuid', response.data.uuid);
            }).catch((error) => {
                console.log(error);
            })
        }
    }
}
</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>