关于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中使用elementUI组件手动上传图片功能

    vue中使用elementUI组件手动上传图片功能

    Vue是一套构建用户界面的框架, 开发只需要关注视图层, 它不仅易于上手,还便于与第三方库或既有项目的整合。这篇文章主要介绍了vue中使用elementUI组件手动上传图片,需要的朋友可以参考下
    2019-12-12
  • vue Antd 输入框Input自动聚焦方式

    vue Antd 输入框Input自动聚焦方式

    这篇文章主要介绍了vue Antd 输入框Input自动聚焦方式,具有很好的参考价值,希望对大家有所帮助。如有错误或未考虑完全的地方,望不吝赐教
    2023-04-04
  • vue+AI智能机器人回复功能实现

    vue+AI智能机器人回复功能实现

    这篇文章主要为大家详细介绍了vue+AI智能机器人回复功能,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2020-07-07
  • vue+element table表格实现动态列筛选的示例代码

    vue+element table表格实现动态列筛选的示例代码

    这篇文章主要介绍了vue+element table表格实现动态列筛选的示例代码,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧
    2021-01-01
  • Vue2 Element el-table多选表格控制选取的思路解读

    Vue2 Element el-table多选表格控制选取的思路解读

    这篇文章主要介绍了Vue2 Element el-table多选表格控制选取的思路解读,具有很好的参考价值,希望对大家有所帮助。如有错误或未考虑完全的地方,望不吝赐教
    2023-07-07
  • Vuejs第六篇之Vuejs与form元素实例解析

    Vuejs第六篇之Vuejs与form元素实例解析

    本文通过实例给大家详细介绍了Vuejs与form元素的相关知识,非常不错,具有参考借鉴价值,需要的朋友可以参考下
    2016-09-09
  • vue登录注册实例详解

    vue登录注册实例详解

    在本篇内容里小编给大家分享的是关于vue登录注册的相关实例内容以及写法分析,有需要朋友们可以学习下。
    2019-09-09
  • Vue3 封装 Element Plus Menu 无限级菜单组件功能的详细代码

    Vue3 封装 Element Plus Menu 无限级菜单组件功能的详细代码

    本文分别使用 SFC(模板方式)和 tsx 方式对 Element Plus *el-menu* 组件进行二次封装,实现配置化的菜单,有了配置化的菜单,后续便可以根据路由动态渲染菜单,对Vue3 无限级菜单组件相关知识感兴趣的朋友一起看看吧
    2022-09-09
  • 如何利用vue+vue-router+elementUI实现简易通讯录

    如何利用vue+vue-router+elementUI实现简易通讯录

    这篇文章主要介绍了如何利用vue+vue-router+elementUI实现简易通讯录,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧
    2019-05-05
  • vite2.0 踩坑实录

    vite2.0 踩坑实录

    本文主要介绍了vite2.0 踩坑,记录了一些在配置项目中遇到的问题,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2021-07-07

最新评论