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="/" 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來判斷用戶是否登錄。但是這樣做感覺比較麻煩的樣子。
3個回答
所有localStorage操作都通過vuex實現
自己補充一個回答，高手請忽略，小白作為參考。
用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對象
Vue 僅可以對其管理的數據做響應式處理，可以理解為 data 中的數據，localStorage 並不在 Vue 的管理下，自然不會有響應特性。要響應 localStorage 的變化，可以嘗試 onStorage 事件。