關(guān)于nuxt?store中保存localstorage的問題
nuxt store中保存localstorage
一、如果是用Nuxtjs,請配置插件:
plugins:[ {src:'~/plugins/localstorage.js",ssr:false } ]
然后,在localStorage.js中:
import createpersistedstate from "vuex-persistedstate'; impont * as Cookies from "js-cookie"; let cookiestorage ={ getItem: function(key){ return Cookies.getJSON(key); }, setItem:function(key,value){ return cookies.set(key,value,{expires:3, secure:false}); }, removeItem:function(key){ return cookies.remove(key); } }; export default(context)>{ createpersistedState({ storage:cookiestorage, BetState:cookiestorage.getItem, setstate:cookiestorage.setItem })(context.store); };
二、Nuxtjs的fetch只用于store,不能用來設(shè)置數(shù)據(jù),可以用AsyncData設(shè)置教據(jù),用在路由頁面即可
三、fetch官方文檔很清楚了:服務(wù)端或切換至目標(biāo)路由之前
四、可以用nuxtServerInit+express session存儲用戶登錄
nuxt監(jiān)聽本地存儲localStorage
在 plugins文件夾的 util.js 里面寫公共的方法,如下:
function dispatchEventStroage() { const signSetItem = localStorage.setItem localStorage.setItem = function(key, val) { let setEvent = new Event('setItemEvent') setEvent.key = key setEvent.newValue = val window.dispatchEvent(setEvent) signSetItem.apply(this, arguments) } } export default dispatchEventStroage;
在需要監(jiān)聽的頁面寫,如下:
mounted() { let _this = this; //根據(jù)自己需要來監(jiān)聽對應(yīng)的key window.addEventListener("setItemEvent",function(e){ //e.key : 是值發(fā)生變化的key //e.newValue : 是可以對應(yīng)的新值 if(e.key==="l_QYCN"){ console.log('這里監(jiān)聽的本地存儲>>>>>>',e.newValue); _this.localLogin = e.newValue; } }) },
總結(jié)
以上為個人經(jīng)驗,希望能給大家一個參考,也希望大家多多支持腳本之家。
相關(guān)文章
vue+element table表格實現(xiàn)動態(tài)列篩選的示例代碼
這篇文章主要介紹了vue+element table表格實現(xiàn)動態(tài)列篩選的示例代碼,文中通過示例代碼介紹的非常詳細(xì),對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值,需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2021-01-01Vue2 Element el-table多選表格控制選取的思路解讀
這篇文章主要介紹了Vue2 Element el-table多選表格控制選取的思路解讀,具有很好的參考價值,希望對大家有所幫助。如有錯誤或未考慮完全的地方,望不吝賜教2023-07-07Vue3?封裝?Element?Plus?Menu?無限級菜單組件功能的詳細(xì)代碼
本文分別使用?SFC(模板方式)和?tsx?方式對?Element?Plus?*el-menu*?組件進(jìn)行二次封裝,實現(xiàn)配置化的菜單,有了配置化的菜單,后續(xù)便可以根據(jù)路由動態(tài)渲染菜單,對Vue3?無限級菜單組件相關(guān)知識感興趣的朋友一起看看吧2022-09-09如何利用vue+vue-router+elementUI實現(xiàn)簡易通訊錄
這篇文章主要介紹了如何利用vue+vue-router+elementUI實現(xiàn)簡易通訊錄,小編覺得挺不錯的,現(xiàn)在分享給大家,也給大家做個參考。一起跟隨小編過來看看吧2019-05-05