尝试在不刷新页面的情况下刷新 Vue 3 和 laravel 9 中的组件

Question

我一直在尝试找到一种在按下注销按钮时刷新 header 组件的方法，这样登录和注册就会显示出来，而无需实际刷新整个页面。如果有人知道这样做的任何有效方法，将不胜感激。我的登录状态会根据本地存储令牌的存在而变化。

<template>
    <header id="header" class="d-flex align-items-center">
        <div
            class="container d-flex align-items-center justify-content-between"
        >
            <h1 class="logo">
                <router-link to="/home"> CatchA<span>Ride</span> </router-link>
            </h1>
            <nav id="navbar" class="navbar">
                <ul>
                    <li>
                        <router-link class="nav-link" to="/home"
                            >Home
                        </router-link>
                    </li>
                    <li>
                        <router-link class="nav-link" to="/prices"
                            >Prices
                        </router-link>
                    </li>
                    <li>
                        <router-link class="nav-link" to="/team"
                            >Team
                        </router-link>
                    </li>
                    <li v-if="!hasToken">
                        <router-link class="nav-link" to="/login"
                            >Login
                        </router-link>
                    </li>
                    <li v-if="!hasToken">
                        <router-link class="nav-link" to="/register"
                            >Register
                        </router-link>
                    </li>
                    <li v-if="hasToken">
                        <router-link to="/" @click="logOut" class="nav-link">
                            Logout
                        </router-link>
                    </li>
                </ul>
            </nav>
        </div>
    </header>
</template>

<script>
export default {
    data() {
        return {
            loggedIn: false,
        };
    },
    computed: {
        hasToken() {
            const storeToken = localStorage.getItem("token");
            if (storeToken) {
                return true;
            }
            false;
        },
    },
    methods: {
        logOut() {
            localStorage.removeItem("token");
            localStorage.removeItem("user");
            localStorage.removeItem("id");
            this.$forceUpdate();
        },
    },
};
</script>

Answer 1

问题是计算属性只有在它们的依赖值是反应性的时才会自动更新。基本上 Vue 无法知道 localStorage 中的值何时更新。有一些库可以使这成为可能。但是，如果不使用这样的：

在您的模板更改中

v-if="!hasToken" 到 v-if="!loggedIn"

修改脚本

export default {
    data() {
        return {
            loggedIn: !!localStorage.getItem("token");
        };
    },
    methods: {
        logOut() {
            localStorage.removeItem("token");
            localStorage.removeItem("user");
            localStorage.removeItem("id");
            this.loggedIn = false;
        },
    },
};

尝试在不刷新页面的情况下刷新 Vue 3 和 laravel 9 中的组件

Trying to refresh a component in Vue 3 and laravel 9 without refreshing the page

html

php

laravel

vue.js

vuejs2