- 首页
- 前端开发
- Vue:登录/注销后标题不会更新，但 localStorage 已更改
Vue:登录/注销后标题不会更新，但 localStorage 已更改
[英] Vue: header doesn't get renewed after login/logout but localStorage is changed
本文介绍了Vue:登录/注销后标题不会更新，但 localStorage 已更改的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
当我使用表单登录时，会发生这种情况:
- localStorage 中的登录值更改为true"
- 路由器推送到/home
- 标题没有改变，仍然显示登录/注册按钮
我需要它
- localStorage 中的登录值更改为true"
- 路由器推送到/home
- 标题更改和图片
Header.vue:
<HeaderItem v-if="!isLoggedIn";类=pl-10"text =登录"链接=/登录"/><HeaderItem v-if="!isLoggedIn";类=pl-10"text =注册"链接=/注册"/><div v-if="isLoggedIn"><用户头/>
导出默认{name: '应用程序',组件:{HeaderItem，UserHeader}，数据() {返回 {主页链接:/home"}},创建:{isLoggedIn() {console.log(JSON.parse(localStorage.getItem("loggedIn")) === "true");if (localStorage.getItem("loggedIn") === "true") {console.log(存储记录为真");}别的 {console.log(存储记录错误");}return localStorage.getItem("loggedIn") === "true";}}}
它只在我按下 Ctrl+Shift+R 后打印正确的消息并更改标题.但是 localStorage 立即具有正确的 loggedIn 值.我该如何解决?
编辑:
我也试过这个:
<HeaderItem v-if="!loggedIn";类=pl-10"text =登录"链接=/登录"/><HeaderItem v-if="!loggedIn";类=pl-10"text =注册"链接=/注册"/><div v-if="loggedIn"><用户头/>
导出默认{name: '应用程序',组件:{HeaderItem，UserHeader}，数据() {返回 {homeLink: "/home",//登录:假}},计算:{登录() {return localStorage.getItem("loggedIn") === "true";},...
结果相同:页眉仅在页面刷新(Ctrl+Shift+R)后发生变化.
解决方案
created 是 vue.js 的生命周期或钩子，在其中定义的任何函数/方法都无法运行.
在您的情况下，您想用作变量，然后使用 computed 属性.
这是您的代码的修复版本:
计算:{isLoggedIn() {console.log(JSON.parse(localStorage.getItem("loggedIn")) === "true");if (localStorage.getItem("loggedIn") === "true") {console.log(存储记录为真");}别的 {console.log(存储记录错误");}return localStorage.getItem("loggedIn") === "true";}},
更新:
如果您希望您的函数在同一组件上具有反应性，请创建一个变量并在您设置 localStorage 登录值的位置设置其值.
这只是一个示例代码:
<div class="flex flex-wrap items-center justify-end ">{{ isLoggedIn }}
</模板><脚本>导出默认{数据 () {返回 {登录:假}},创建(){//添加 3 秒间隔以使值变为真并检查反应性setTimeout(() => this.onSignIn(), 3000)},计算:{isLoggedIn() {if (localStorage.getItem('loggedIn')) return localStorage.getItem("loggedIn") === "true";返回 this.loggedIn}},方法: {登录 () {this.loggedIn = 真localStorage.setItem('loggedIn', true)}}}
根据您的情况更新 2:
了解您的情况后，这里是代码，可以帮助您.我使用总线事件是为了在可能远离父级访问的组件之间进行通信，例如 App.vue.
event-bus.js
从'vue'导入Vue；const EventBus = new Vue();导出默认的 EventBus；
LoginForm.vue
<div class="home-page"><按钮类型=提交"@click=onSignIn()">登录</button>
</模板><脚本>从 '../event-bus' 导入 EventBus；导出默认{方法: {登录 () {localStorage.setItem('loggedIn', true)EventBus.$emit('OnLogin', true)}}}
App.vue
<div id="应用程序"><Header :userLoggedIn="isLoggedIn"/><路由器视图/>
</模板><脚本>从'./components/Header'导入标题从 './event-bus' 导入 EventBus；导出默认{成分: {标题},数据() {返回 {isLoggedIn: 假}},创建(){EventBus.$on('OnLogin', (isLogin) => {this.isLoggedIn = isLogin})}}
Header.vue
<div><h2>{{ userLoggedIn }}</h2>
</模板><脚本>导出默认{道具:['userLoggedIn']}
When I login using a form this happens:
- loggedIn value in localStorage is changed to "true"
- Router pushes to /home
- Header doesn't change and still shows Login/Signup buttons
I need it to be
- loggedIn value in localStorage is changed to "true"
- Router pushes to /home
- Header changes and a picture
Header.vue:
<div class="flex flex-wrap items-center justify-end ">
<HeaderItem v-if="!isLoggedIn"
class="pl-10" text = "Login" link="/login"/>
<HeaderItem v-if="!isLoggedIn" class="pl-10"
text = "Signup" link="/signup"/>
<div v-if="isLoggedIn">
<UserHeader/>
</div>
</div>
export default {
name: 'App',
components: {HeaderItem, UserHeader},
data() {
return {
homeLink: "/home"
}
},
created: {
isLoggedIn() {
console.log(JSON.parse(localStorage.getItem("loggedIn")) === "true");
if (localStorage.getItem("loggedIn") === "true") {
console.log("STORAGE LOGGED IN TRUE");
}
else {
console.log("STORAGE LOGGED IN FALSE");
}
return localStorage.getItem("loggedIn") === "true";
}
}
}
It only prints the correct message and changes header after I press Ctrl+Shift+R. But the localStorage has the correct loggedIn value right away. How do I fix it?
EDIT:
I also tried this:
<div class="flex flex-wrap items-center justify-end ">
<HeaderItem v-if="!loggedIn"
class="pl-10" text = "Login" link="/login"/>
<HeaderItem v-if="!loggedIn" class="pl-10"
text = "Signup" link="/signup"/>
<div v-if="loggedIn">
<UserHeader/>
</div>
</div>
export default {
name: 'App',
components: {HeaderItem, UserHeader},
data() {
return {
homeLink: "/home",
// loggedIn: false
}
},
computed: {
loggedIn() {
return localStorage.getItem("loggedIn") === "true";
},
...
It has the same results: the header only changes after the page refresh (Ctrl+Shift+R).
解决方案
The created is a lifecycle or hook of vue.js, inside it whatever functions/methods you define, is not available to run.
As in your case, you want to use as a variable, then use computed property.
Here is the fix version of your code:
computed: {
isLoggedIn() {
console.log(JSON.parse(localStorage.getItem("loggedIn")) === "true");
if (localStorage.getItem("loggedIn") === "true") {
console.log("STORAGE LOGGED IN TRUE");
}
else {
console.log("STORAGE LOGGED IN FALSE");
}
return localStorage.getItem("loggedIn") === "true";
}
},
Updated:
If you want your functions to be reactive on the same component, then create a variable and set its value where you set the localStorage loggedIn value.
This is just an example code:
<template>
<div class="flex flex-wrap items-center justify-end ">
<h3>{{ isLoggedIn }}</h3>
</div>
</template>
<script>
export default {
data () {
return {
loggedIn: false
}
},
created () {
// added 3 seconds gap to make the value true and check reactivity
setTimeout(() => this.onSignIn(), 3000)
},
computed: {
isLoggedIn() {
if (localStorage.getItem('loggedIn')) return localStorage.getItem("loggedIn") === "true";
return this.loggedIn
}
},
methods: {
onSignIn () {
this.loggedIn = true
localStorage.setItem('loggedIn', true)
}
}
}
</script>
Update 2 as per your situation:
After understanding your situation, here is the code, that will help you. I used the Bus Event in order to communicate between the component which might be far on the parent to access, such as App.vue.
event-bus.js
import Vue from 'vue';
const EventBus = new Vue();
export default EventBus;
LoginForm.vue
<template>
<div class="home-page">
<button type="submit" @click="onSignIn()">Login</button>
</div>
</template>
<script>
import EventBus from '../event-bus';
export default {
methods: {
onSignIn () {
localStorage.setItem('loggedIn', true)
EventBus.$emit('OnLogin', true)
}
}
}
</script>
App.vue
<template>
<div id="app">
<Header :userLoggedIn="isLoggedIn"/>
<router-view/>
</div>
</template>
<script>
import Header from './components/Header'
import EventBus from './event-bus';
export default {
components: {
Header
},
data() {
return {
isLoggedIn: false
}
},
created () {
EventBus.$on('OnLogin', (isLogin) => {
this.isLoggedIn = isLogin
})
}
}
</script>
Header.vue
<template>
<div>
<h2>{{ userLoggedIn }}</h2>
</div>
</template>
<script>
export default {
props: ['userLoggedIn']
}
</script>
这篇关于Vue:登录/注销后标题不会更新，但 localStorage 已更改的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
查看全文
