javascript - 如何用数据更新v-if？

Question

我正在使用 vueJS 创建一个简单的应用程序，但我在 react 性方面遇到了一些问题。

当用户连接到应用程序时，他会获得 JWT，我将此 JWT 存储在本地存储中。为了验证用户是否已登录，我只需检查 token 是否存在。

首先，这是一个好方法吗？

现在我正在尝试更新导航栏，当用户未登录时，我有 2 个按钮“注册”“登录”，当他登录时，我希望显示“断开连接”按钮，而另外两个按钮消失.

我的导航栏组件内部带有“v-if”，用于显示或不显示按钮。

目前我在 data() 中设置了一个 bool 值“isLogged”，如何让 vueJS 监视该数据并在该数据更新时更新我的​​组件？

    <div class="navbar-item" v-if="!isLogged">
        <div class="buttons">
            <a @click="$router.push('/login')" class="button nav-button is-outlined">
                CONNEXION
            </a>
            <a @click="$router.push('/register')" class="button nav-button is-outlined">
                INSCRIPTION
            </a>
        </div>
    </div>
    <a @click="disconnect" class="navbar-item" v-if="isLogged">
        Déconnexion
    </a>

    data() {
        return {
            isLogged: this.$jwt.hasToken()
        }
    }

我希望更新导航栏而无需刷新组件。

Answer 1

使用计算值代替数据。

computed: {
    isLogged() {
        return this.$jwt.hasToken()
    }
}