nuxt刷新页面Vuex失效,在axios中使用vuex【vuex-persist,localStorage,Cookie。三种办法解决】

本文主要是介绍nuxt刷新页面Vuex失效,在axios中使用vuex【vuex-persist,localStorage,Cookie。三种办法解决】,希望对大家解决编程问题提供一定的参考价值,需要的开发者们随着小编来一起学习吧!

弄了几个小时,才算是解决nuxt刷新vuex失效的问题。
vuex-persist 方法在线上使用的时候会报错。所以建议直接使用localStorage,或Cookile方法
下面具体演示,都以state中的token为例

使用vuex-persist线上报错的原因

线上发布使用的是node,但是在node里面没有window这个对象。初始化vuex-persist的时候使用到了window
如果你非要使用window对象,必须在mounted(){}方法里面使用,至于为啥我也不知道,反正事实就是这样的。

vuex-persist

第一步:安装
npm i vuex-persist
第二步:配置

2-1:创建vuex-persist.js (在plugins下面)
在这里插入图片描述

import VuexPersistence from 'vuex-persist'
export default ({ store }) => {    window.onNuxtReady(() => {        new VuexPersistence({           /* your options */        }).plugin(store);    });
}

2-2:配置nuxt.config.js

{ src: '~/plugins/vuex-persist', ssr: false },

在这里插入图片描述


2-3:修改store/vuex

在这里插入图片描述

import VuexPersistence from 'vuex-persist'
plugins: [new VuexPersistence().plugin]



最后说一下设置token的问题(这也是个坑)

官方推荐这样设置 $axios.setHeader(‘X-Access-Token’, store.state.token)
这样设置,会存在失效问题
这样设置就好了 ‘config.headers.common[‘X-Access-Token’] = store.state.token

在这里插入图片描述


localStorage

1、获取到了token,存入localStorage (其它state,中的数据也同样如此)
在这里插入图片描述

window.localStorage.setItem("storeState",JSON.stringify(this.$store.state))

2、刷新页面的时候,从localStorage 中,把数据转存到store中去
在这里插入图片描述

    mounted(){         //在页面加载时读取localStorage里的状态信息this.$store.replaceState(Object.assign(this.$store.state,JSON.parse(localStorage.getItem("storeState"))));//在页面刷新时将vuex里的信息保存到localStorage里              window.addEventListener("beforeunload",()=>{localStorage.setItem("storeState",JSON.stringify(this.$store.state))              })         }

Cookie,nuxtServerInit

nuxtServerInit 这个是Nuxt提供的方法,简单说,就是在页面刷新的时候,在到达页面之前。给你去处理state数据方法。
我们把登录的token存放在Cookie里面,然后在nuxtServerInit 方法里面去获取Cookie里面的数据赋值到state
nuxtServerInit 文档地址 https://zh.nuxtjs.org/guide/vuex-store/
唯一感觉这个方法不好的是:获取cookie中的token的时候要对字符串进行处理,当然如果写个utils也就解决了

1、安装js-cookie,可以选择npm,我这里选择CND

{ src: 'https://cdn.bootcss.com/js-cookie/2.2.1/js.cookie.min.js' },

在这里插入图片描述
2、把token,存入Cookie (后面那个7,是设置七天过期)
在这里插入图片描述
3、获取并设置cookie
在这里插入图片描述

这篇关于nuxt刷新页面Vuex失效,在axios中使用vuex【vuex-persist,localStorage,Cookie。三种办法解决】的文章就介绍到这儿,希望我们推荐的文章对编程师们有所帮助!



http://www.chinasem.cn/article/909243

相关文章

使用Python实现可恢复式多线程下载器

《使用Python实现可恢复式多线程下载器》在数字时代,大文件下载已成为日常操作,本文将手把手教你用Python打造专业级下载器,实现断点续传,多线程加速,速度限制等功能,感兴趣的小伙伴可以了解下... 目录一、智能续传:从崩溃边缘抢救进度二、多线程加速:榨干网络带宽三、速度控制:做网络的好邻居四、终端交互

Python中注释使用方法举例详解

《Python中注释使用方法举例详解》在Python编程语言中注释是必不可少的一部分,它有助于提高代码的可读性和维护性,:本文主要介绍Python中注释使用方法的相关资料,需要的朋友可以参考下... 目录一、前言二、什么是注释?示例:三、单行注释语法:以 China编程# 开头,后面的内容为注释内容示例:示例:四

Redis出现中文乱码的问题及解决

《Redis出现中文乱码的问题及解决》:本文主要介绍Redis出现中文乱码的问题及解决,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教... 目录1. 问题的产生2China编程. 问题的解决redihttp://www.chinasem.cns数据进制问题的解决中文乱码问题解决总结

Go语言数据库编程GORM 的基本使用详解

《Go语言数据库编程GORM的基本使用详解》GORM是Go语言流行的ORM框架,封装database/sql,支持自动迁移、关联、事务等,提供CRUD、条件查询、钩子函数、日志等功能,简化数据库操作... 目录一、安装与初始化1. 安装 GORM 及数据库驱动2. 建立数据库连接二、定义模型结构体三、自动迁

ModelMapper基本使用和常见场景示例详解

《ModelMapper基本使用和常见场景示例详解》ModelMapper是Java对象映射库,支持自动映射、自定义规则、集合转换及高级配置(如匹配策略、转换器),可集成SpringBoot,减少样板... 目录1. 添加依赖2. 基本用法示例:简单对象映射3. 自定义映射规则4. 集合映射5. 高级配置匹

Spring 框架之Springfox使用详解

《Spring框架之Springfox使用详解》Springfox是Spring框架的API文档工具,集成Swagger规范,自动生成文档并支持多语言/版本,模块化设计便于扩展,但存在版本兼容性、性... 目录核心功能工作原理模块化设计使用示例注意事项优缺点优点缺点总结适用场景建议总结Springfox 是

嵌入式数据库SQLite 3配置使用讲解

《嵌入式数据库SQLite3配置使用讲解》本文强调嵌入式项目中SQLite3数据库的重要性,因其零配置、轻量级、跨平台及事务处理特性,可保障数据溯源与责任明确,详细讲解安装配置、基础语法及SQLit... 目录0、惨痛教训1、SQLite3环境配置(1)、下载安装SQLite库(2)、解压下载的文件(3)、

使用Python绘制3D堆叠条形图全解析

《使用Python绘制3D堆叠条形图全解析》在数据可视化的工具箱里,3D图表总能带来眼前一亮的效果,本文就来和大家聊聊如何使用Python实现绘制3D堆叠条形图,感兴趣的小伙伴可以了解下... 目录为什么选择 3D 堆叠条形图代码实现:从数据到 3D 世界的搭建核心代码逐行解析细节优化应用场景:3D 堆叠图

Springboot如何正确使用AOP问题

《Springboot如何正确使用AOP问题》:本文主要介绍Springboot如何正确使用AOP问题,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教... 目录​一、AOP概念二、切点表达式​execution表达式案例三、AOP通知四、springboot中使用AOP导出

Python中Tensorflow无法调用GPU问题的解决方法

《Python中Tensorflow无法调用GPU问题的解决方法》文章详解如何解决TensorFlow在Windows无法识别GPU的问题,需降级至2.10版本,安装匹配CUDA11.2和cuDNN... 当用以下代码查看GPU数量时,gpuspython返回的是一个空列表,说明tensorflow没有找到