VueJS 成功登录后如何更新导航栏？

Question

用户从登录页面登录后，我试图“重新渲染”我的导航栏。我有某些导航链接，这些链接将根据用户是否登录而显示。

现在，如果我可以在 localStorage 上找到用户项，我就会渲染这些内容：

`

Navbar.vue
<script>
export default {
    data() {
        return {
            notLoggedInDropDown: false,
            loggedInDropDown: false,
            logged: localStorage.getItem('user') == null ? false : true,
            user : {} 
        }
    },
    methods: {
        closeSession() {
            localStorage.removeItem('user');
            localStorage.removeItem('token');
            this.logged = false;
            this.user = {};
        },
    },
    mounted() {
        var user = JSON.parse(localStorage.getItem('user'));
        this.user = user;
    },
}
</script>

And this is what I do after I login from the login page:

Login.vue
 methods: {
        async signIn(){
            try {
                const data = await login(this.username, this.password)
                localStorage.setItem('user', JSON.stringify(data.user))
                localStorage.setItem('token', data.token)
                this.$router.push('/')
            } catch (error) {
                this.error.status = true
                this.error.message = "Username or password failed."
            }
        }
    },

`

我尝试使用手套发送发射器，但导航栏实际上并不是登录页面的子组件。我还尝试将记录的布尔值设置为计算语句，但它仍然不会重新渲染。我知道它不更新的原因是 router.push 方法不是反应性的，但我不确定下一步要尝试什么。另外，我的应用程序目前不使用 Vuex，我可以轻松地将其集成到我的 Vue 应用程序中吗？欢迎任何帮助！

Answer 1

我认为最好的方法是使用Vuex。

在vuex中创建一个变量，从

Login.vue

写入它并通过getter将其导出到所有组件。从

Navbar.vue

你应该在计算属性中获取 vuex 变量，并在有人登录时对其值变化做出反应。

否则，处理登录的推荐方法是通过 vue-router，您应该查看 vue 文档。

祝你好运！

Answer 2

我知道三种可行的解决方案。

• 其中一个不是使用

  vue-router

  而是使用浏览器的功能来重新路由。类似于

  location.replace(url);

  。

• Two 通过

  emitting

  从登录页面到应用程序，然后使用

  prop

  将信息提供给导航栏。

• 三个，我通常更喜欢使用

  vuex

  在组件之间获取共享存储。

选项一是最简单、最快的，但选项三可以让您的应用程序更加健壮。