关于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项目中使用ueditor的实例讲解

    vue项目中使用ueditor的实例讲解

    下面小编就为大家分享一篇vue项目中使用ueditor的实例讲解,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧
    2018-03-03
  • VUE 使用canvas绘制管线管廊示例详解

    VUE 使用canvas绘制管线管廊示例详解

    这篇文章主要为大家介绍了VUE 使用canvas绘制管线/管廊实现示例详解,有需要的朋友可以借鉴参考下,希望能够有所帮助,祝大家多多进步,早日升职加薪
    2023-04-04
  • vue使用canvas手写输入识别中文

    vue使用canvas手写输入识别中文

    这篇文章主要介绍了vue使用canvas手写输入识别中文,工作时遇到一些项目如:系统上的输入法使用不方便,客户要求做一个嵌入web网页的手写输入法。下面我们来看看文章得具体描述吧
    2021-11-11
  • vue环境变量配置之process.env解读

    vue环境变量配置之process.env解读

    这篇文章主要介绍了vue环境变量配置之process.env解读,具有很好的参考价值,希望对大家有所帮助。如有错误或未考虑完全的地方,望不吝赐教
    2023-03-03
  • Vue3结合TypeScript项目开发实战记录

    Vue3结合TypeScript项目开发实战记录

    听说有的公司已经开始用vue3了 赶紧打开B站学一下,下面这篇文章主要给大家介绍了关于Vue3结合TypeScript项目开发实战的相关资料,文中通过示例代码介绍的非常详细,需要的朋友可以参考下
    2021-09-09
  • vue 组件中使用 transition 和 transition-group实现过渡动画

    vue 组件中使用 transition 和 transition-group实现过渡动画

    本文给大家分享一下vue 组件中使用 transition 和 transition-group 设置过渡动画,总结来说可分为分为 name 版, js 钩子操作类名版, js 钩子操作行内样式版,本文给大家介绍的非常详细,具有一定的参考借鉴价值,需要的朋友参考下吧
    2019-07-07
  • Element Plus暗黑模式及模式自由切换的实现

    Element Plus暗黑模式及模式自由切换的实现

    本文详细介绍了如何在使用Vite构建的Vue项目中实现ElementPlus暗黑模式及模式切换,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧
    2024-11-11
  • 详解vue3.2中setup语法糖<script lang="ts" setup>

    详解vue3.2中setup语法糖<script lang="ts" setup>

    Vue 3.2 引入了语法,这是一种稍微不那么冗长的声明组件的方式,下面这篇文章主要介绍了详解vue3.2中setup语法糖<script lang="ts"setup>的相关资料,文中通过实例代码介绍的非常详细,需要的朋友可以参考下
    2023-01-01
  • 基于vue--key值的特殊用处详解

    基于vue--key值的特殊用处详解

    这篇文章主要介绍了基于vue--key值的特殊用处详解,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧
    2020-07-07
  • vue实现前台列表数据过滤搜索、分页效果

    vue实现前台列表数据过滤搜索、分页效果

    这篇文章主要为大家详细介绍了vue实现前台列表数据过滤搜索、分页效果,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2019-05-05

最新评论