menu
more_vert
vuejs能否监控localStorage的变化?

作者:dayu

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="/" class="navbar-left"><img src="../../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="#">我的网站</a></li> </ul> </li> </ul> <ul class="nav navbar-nav navbar-right" v-if="signed"> <li><a href="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="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 评论
  • 邀请回答
  • 编辑