VueJs3 将数据从一个组件发送到另一个组件

Question

我目前正在做一个 VueJs3 项目。我已经编写了一个登录系统，它工作得很好。我现在想在主页上有一个 div，告诉用户他们使用哪个帐户登录。

"您登录为：" + 用户名

因此，我必须将用户名从登录组件发送到主组件。有人可以帮我吗？我尝试了很多方法，但似乎都没有。

顺便说一句。组件都保存在 components 文件夹中

这是我的代码：

home.vue

    <div class="home">
        <h1>You are logged in as: {{currentusername}}</h1>
        <Maschinen/>

    </div>
</template>

<script>
    import Maschinen from '@/components/Maschinen.vue'
    import axios from 'axios'

    export default {
        name: 'Home',
        components: {
            Maschinen
        },
        data() {
            return {
                currentusername: null,
            }
        },
        async created() {
            const response = await axios.get('http://localhost:8080/user/hetwinuser', {
                headers: {
                    Authorization: 'Bearer ' + localStorage.getItem('token')
                }
            });
            this.currentusername= (response.data.username);
        }
    }
</script>



login.vue:

<template>
    <form @submit.prevent="handleSubmit">
        <h1>Login</h1>
        <!--username + pw input for login-->
        <div class="form-group">
            <label id="username">Username:</label>
            <input id="usernameinput" type="text" class="form-control" v-model="username" placeholder="Username">
        </div>
        <div>
            <label id="password">Password:</label>
            <input id="passwordinput" type="password" class="form-control" v-model="password" placeholder="Password">
        </div>
        <!--enter buttons-->
        <button class="enter">Enter</button>
        <router-link to="/register" id="goToRegister" tag="button">Register</router-link>
    </form>
</template>

<script>
    import axios from 'axios';

    export default {
        name: "Login",
        data: () => {
            return {
                username: '',
                password: ''
            }
        },
        methods: {
            async handleSubmit() {//executed when enter button is pressed
                const data = {
                    username: this.username,
                    password: this.password
                };
                axios.post('http://localhost:8080/authenticate', data) //post the username + pw and will receive the token in exchange
                    .then(
                        res => {
                            localStorage.setItem('token', res.data.jwt);
                            localStorage.setItem('currentusername', this.username);
                            //console.log(localStorage.getItem('token'));
                        }
                    ).catch(
                    err => {
                        console.log(err)
                    }
                );

            }
        },

    }
</script>```

Answer 1

用户名和密码

在 store -> state.js 下定义它。然后在你想要的地方

将其用作“this.$store.state.username”