需求：不同組件間共用同一數(shù)據(jù)，當一個組件將數(shù)據(jù)發(fā)生變化時，其他組件也可以響應該變化。

公司主營業(yè)務：網(wǎng)站制作、做網(wǎng)站、移動網(wǎng)站開發(fā)等業(yè)務。幫助企業(yè)客戶真正實現(xiàn)互聯(lián)網(wǎng)宣傳，提高企業(yè)的競爭能力。創(chuàng)新互聯(lián)是一支青春激揚、勤奮敬業(yè)、活力青春激揚、勤奮敬業(yè)、活力澎湃、和諧高效的團隊。公司秉承以“開放、自由、嚴謹、自律”為核心的企業(yè)文化，感謝他們對我們的高要求，感謝他們從不同領域給我們帶來的挑戰(zhàn)，讓我們激情的團隊有機會用頭腦與智慧不斷的給客戶帶來驚喜。創(chuàng)新互聯(lián)推出欒川免費做網(wǎng)站回饋大家。

分析：vue無法監(jiān)聽localstorage的變化。localstorage主要用于不同頁面間傳值，vue適合組件間傳值。對于組件間共用同一數(shù)據(jù)又想保存住信息或者再頁面刷新的時候不丟失數(shù)據(jù)（vuex在頁面刷新的時候存儲的值會丟失，localstorage存儲在本地瀏覽器中），可以采用vuex+localstorage的方式。

關于vuex和storage的區(qū)別

1.最重要的區(qū)別：vuex存儲在內(nèi)存，localstorage則以文件的方式存儲在本地

2.應用場景：vuex用于組件之間的傳值，localstorage則主要用于不同頁面之間的傳值。

3.永久性：當刷新頁面時vuex存儲的值會丟失，localstorage不會。

注：很多同學覺得用localstorage可以代替vuex, 對于不變的數(shù)據(jù)確實可以，但是當兩個組件共用一個數(shù)據(jù)源（對象或數(shù)組）時，如果其中一個組件改變了該數(shù)據(jù)源，希望另一個組件響應該變化時，localstorage無法做到，原因就是區(qū)別1。

關于vuex參考文檔：http://vuex.vuejs.org/zh-cn/index.html

實現(xiàn)過程：以首頁展示用戶頭像信息，修改個人信息在公共組件頭部組件中為例，當用戶修改個人信息時首頁的圖片實時變化，如果不對頭像信息做存儲更新，每次用戶修改完只有刷新頁面或者從其他頁面返回回來才能看到變化，即新設置的頭像信息，僅展示核心代碼。

1.首先先定義一個變量在state中。State負責存儲整個應用的狀態(tài)數(shù)據(jù)，后期就可以使用this.$store.state直接獲取狀態(tài)。也可以利用vuex提供的mapState輔助函數(shù)將state映射到計算屬性中去。

const state = {
 imgInfo:null //首頁頭像信息

}

分享標題：詳解vuex結(jié)合localstorage動態(tài)監(jiān)聽storage的變化-創(chuàng)新互聯(lián)
網(wǎng)頁地址：http://chinadenli.net/article32/diijsc.html

成都網(wǎng)站建設公司_創(chuàng)新互聯(lián)，為您提供做網(wǎng)站、服務器托管、Google、企業(yè)建站、網(wǎng)頁設計公司、App設計

廣告

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主，如果涉及侵權請盡快告知，我們將會在第一時間刪除。文章觀點不代表本網(wǎng)站立場，如需處理請聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時需注明來源： 創(chuàng)新互聯(lián)