0

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

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

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

现在我正在尝试更新导航栏，当用户未登录时，我有 2 个按钮“注册”“登录”，当他登录时，我想让我的“断开连接”按钮出现，另外两个按钮消失。

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

目前我在我的 data() 中设置了一个布尔值“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()
        }
    }

我想让我的导航栏更新而不必刷新组件。

4

1 回答 1

2

Use a computed value instead data. 

computed: {
    isLogged() {
        return this.$jwt.hasToken()
    }
}
于 2019-04-09T18:04:02.450 回答