关于nuxt store中保存localstorage的问题
更新时间:2023年10月11日 10:47:49 作者:慕水渔
这篇文章主要介绍了关于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,不能用来设置数据,可以用AsyncData设置教据,用在路由页面即可
三、fetch官方文档很清楚了:服务端或切换至目标路由之前
四、可以用nuxtServerInit+express session存储用户登录
nuxt监听本地存储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;在需要监听的页面写,如下:
mounted() {
let _this = this;
//根据自己需要来监听对应的key
window.addEventListener("setItemEvent",function(e){
//e.key : 是值发生变化的key
//e.newValue : 是可以对应的新值
if(e.key==="l_QYCN"){
console.log('这里监听的本地存储>>>>>>',e.newValue);
_this.localLogin = e.newValue;
}
})
},总结
以上为个人经验,希望能给大家一个参考,也希望大家多多支持脚本之家。
相关文章
vue+element table表格实现动态列筛选的示例代码
这篇文章主要介绍了vue+element table表格实现动态列筛选的示例代码,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧2021-01-01
Vue2 Element el-table多选表格控制选取的思路解读
这篇文章主要介绍了Vue2 Element el-table多选表格控制选取的思路解读,具有很好的参考价值,希望对大家有所帮助。如有错误或未考虑完全的地方,望不吝赐教2023-07-07
Vue3 封装 Element Plus Menu 无限级菜单组件功能的详细代码
本文分别使用 SFC(模板方式)和 tsx 方式对 Element Plus *el-menu* 组件进行二次封装,实现配置化的菜单,有了配置化的菜单,后续便可以根据路由动态渲染菜单,对Vue3 无限级菜单组件相关知识感兴趣的朋友一起看看吧2022-09-09
如何利用vue+vue-router+elementUI实现简易通讯录
这篇文章主要介绍了如何利用vue+vue-router+elementUI实现简易通讯录,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧2019-05-05


最新评论