首页 > 代码库 > vuejs能否监控localStorage的变化?
vuejs能否监控localStorage的变化?
https://segmentfault.com/q/1010000006806036
1.问题
用vue.js过程中了解到计算属性,它类似于定义了一个函数f,f的返回值依赖于某些变量a,b,c。当a,b,c中任意一个发生变化,就调用f得到新的返回值。
我现在用token做登录身份验证,使用到localStorage
,在computed
中编写“函数”,根据localStorage
的值,在导航栏显示不同的链接:已经登录的显示“用户名”和“退出”,未登录则显示“注册”和“登录”。
我发现computed
中编写的“函数”不会监控localStorage
取值的变化:当我将localStorage
清空后,页面并没有根据相应的条件,改变导航栏的显示。
问题:vuejs能否监控localStorage取值的变化?如果能,代码怎么写?如果不能,有哪些推荐方案?
2.代码
我的导航栏组件代码headnav.vue:
<template>
<!-- Fixed navbar -->
<nav class="navbar navbar-inverse navbar-fixed-top" id="navbarcolor">
<div class="container-fluid">
<div class="navbar-header">
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar" aria-expanded="false" aria-controls="navbar">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a href=http://www.mamicode.com/"/" class="navbar-left"><img src=http://www.mamicode.com/"../../assets/rlogo2.png" style="height:43px;margin:auto;margin-right:20px"></a>
</div>
<div id="navbar" class="navbar-collapse collapse">
<ul class="nav navbar-nav" id="navtext">
<li></li>
<li>
<ul class="dropdown-menu">
<li><a href=http://www.mamicode.com/"#">我的网站</a></li>
</ul>
</li>
</ul>
<ul class="nav navbar-nav navbar-right" v-if="signed">
<li><a href=http://www.mamicode.com/"sss">{{sign_name}}</a></li> <li><a @click="logout">退出</a></li>;
</ul>
<ul class="nav navbar-nav navbar-right" v-else>
<li><a v-link="{ path: ‘login‘ }">登录</a></li> <li><a href=http://www.mamicode.com/"register.html">注册</a></li>
</ul>
</div><!--/.nav-collapse -->
</div>
</nav>
</template>
<script>
export default {
data () {
return {
sign_name: ‘‘ // 已登录时的用户名
}
},
computed: {
// 这里!判断是否已经登录
// 但是发现不能监控localStorage的变化
signed () {
if (localStorage.token != null) {
return true
}
return false
}
},
methods: {
logout () {
localStorage.clear() // 清空localStorage
}
}
}
</script>
3.报错
也不算是大的错误,但是当点击“退出”后,页面导航栏的内容并不更新。
4.已有尝试
在组件的export default
中编写了ready()方法,让页面每次加载的时候把localStorage变量存储在一个变量sign_name
中,以后用这个变量sign_name
来判断用户是否登录。但是这样做感觉比较麻烦的样子。
- 2016年09月03日提问
- 1 评论
- 邀请回答
- 编辑
3个回答
所有localStorage操作都通过vuex实现
- 2016年09月03日回答
- 1 评论
- 编辑
自己补充一个回答,高手请忽略,小白作为参考。
用vuex可以维护多个组件之间的共用信息,有点“全局变量”的意思。
不过我这里要在多个tab之间维护同样的登录状态,还需要配合js的事件监听函数来做。例如我把vuex脚手架搭起来,登录信息的改变相关的action和mutation都写好了,那么还需要在store.js中监听storage的变化:
// 用来维护多个标签页之间登录信息的同步
var storageHandler = function () {
state.loginName = localStorage.name
}
window.addEventListener(‘storage‘, storageHandler, false)
参考:
Vuex: Syncing state between 2 tabs
Responding to storage changes with the StorageEvent
Event对象
- 2016年09月05日更新
- 评论
- 编辑
Vue 仅可以对其管理的数据做响应式处理,可以理解为 data 中的数据,localStorage 并不在 Vue 的管理下,自然不会有响应特性。要响应 localStorage 的变化,可以尝试 onStorage 事件。
- 2016年09月03日回答
- 评论
- 编辑
vuejs能否监控localStorage的变化?