關(guān)于nuxt?store中保存localstorage的問(wèn)題
更新時(shí)間：2023年10月11日 10:47:49 作者：慕水漁
這篇文章主要介紹了關(guān)于nuxt?store中保存localstorage的問(wèn)題,具有很好的參考價(jià)值,希望對(duì)大家有所幫助,如有錯(cuò)誤或未考慮完全的地方,望不吝賜教
nuxt store中保存localstorage
一、如果是用Nuxtjs，請(qǐng)配置插件：
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，不能用來(lái)設(shè)置數(shù)據(jù)，可以用AsyncData設(shè)置教據(jù)，用在路由頁(yè)面即可
三、fetch官方文檔很清楚了：服務(wù)端或切換至目標(biāo)路由之前
四、可以用nuxtServerInit+express session存儲(chǔ)用戶登錄
nuxt監(jiān)聽(tīng)本地存儲(chǔ)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)聽(tīng)的頁(yè)面寫，如下：
mounted() {
let _this = this;
//根據(jù)自己需要來(lái)監(jiān)聽(tīng)對(duì)應(yīng)的key
window.addEventListener("setItemEvent",function(e){
//e.key : 是值發(fā)生變化的key
//e.newValue : 是可以對(duì)應(yīng)的新值
if(e.key==="l_QYCN"){
console.log('這里監(jiān)聽(tīng)的本地存儲(chǔ)>>>>>>',e.newValue);
_this.localLogin = e.newValue;
}
})
},總結(jié)
以上為個(gè)人經(jīng)驗(yàn)，希望能給大家一個(gè)參考，也希望大家多多支持腳本之家。
相關(guān)文章
vue中使用elementUI組件手動(dòng)上傳圖片功能
Vue是一套構(gòu)建用戶界面的框架， 開(kāi)發(fā)只需要關(guān)注視圖層， 它不僅易于上手，還便于與第三方庫(kù)或既有項(xiàng)目的整合。這篇文章主要介紹了vue中使用elementUI組件手動(dòng)上傳圖片,需要的朋友可以參考下2019-12-12
這篇文章主要介紹了vue Antd 輸入框Input自動(dòng)聚焦方式，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2023-04-04
vue+AI智能機(jī)器人回復(fù)功能實(shí)現(xiàn)
這篇文章主要為大家詳細(xì)介紹了vue+AI智能機(jī)器人回復(fù)功能，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2020-07-07
vue+element table表格實(shí)現(xiàn)動(dòng)態(tài)列篩選的示例代碼
這篇文章主要介紹了vue+element table表格實(shí)現(xiàn)動(dòng)態(tài)列篩選的示例代碼，文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧2021-01-01
Vue2 Element el-table多選表格控制選取的思路解讀
這篇文章主要介紹了Vue2 Element el-table多選表格控制選取的思路解讀，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2023-07-07
Vuejs第六篇之Vuejs與form元素實(shí)例解析
本文通過(guò)實(shí)例給大家詳細(xì)介紹了Vuejs與form元素的相關(guān)知識(shí)，非常不錯(cuò)，具有參考借鑒價(jià)值,需要的朋友可以參考下2016-09-09
在本篇內(nèi)容里小編給大家分享的是關(guān)于vue登錄注冊(cè)的相關(guān)實(shí)例內(nèi)容以及寫法分析，有需要朋友們可以學(xué)習(xí)下。2019-09-09
Vue3?封裝?Element?Plus?Menu?無(wú)限級(jí)菜單組件功能的詳細(xì)代碼
本文分別使用?SFC（模板方式）和?tsx?方式對(duì)?Element?Plus?*el-menu*?組件進(jìn)行二次封裝，實(shí)現(xiàn)配置化的菜單，有了配置化的菜單，后續(xù)便可以根據(jù)路由動(dòng)態(tài)渲染菜單，對(duì)Vue3?無(wú)限級(jí)菜單組件相關(guān)知識(shí)感興趣的朋友一起看看吧2022-09-09
如何利用vue+vue-router+elementUI實(shí)現(xiàn)簡(jiǎn)易通訊錄
這篇文章主要介紹了如何利用vue+vue-router+elementUI實(shí)現(xiàn)簡(jiǎn)易通訊錄，小編覺(jué)得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧2019-05-05
本文主要介紹了vite2.0 踩坑，記錄了一些在配置項(xiàng)目中遇到的問(wèn)題，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2021-07-07