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

相关文章

Java学习手册之Filter和Listener使用方法

《Java学习手册之Filter和Listener使用方法》:本文主要介绍Java学习手册之Filter和Listener使用方法的相关资料,Filter是一种拦截器,可以在请求到达Servl... 目录一、Filter(过滤器)1. Filter 的工作原理2. Filter 的配置与使用二、Listen

Pandas使用AdaBoost进行分类的实现

《Pandas使用AdaBoost进行分类的实现》Pandas和AdaBoost分类算法,可以高效地进行数据预处理和分类任务,本文主要介绍了Pandas使用AdaBoost进行分类的实现,具有一定的参... 目录什么是 AdaBoost?使用 AdaBoost 的步骤安装必要的库步骤一:数据准备步骤二:模型

使用Pandas进行均值填充的实现

《使用Pandas进行均值填充的实现》缺失数据(NaN值)是一个常见的问题,我们可以通过多种方法来处理缺失数据,其中一种常用的方法是均值填充,本文主要介绍了使用Pandas进行均值填充的实现,感兴趣的... 目录什么是均值填充?为什么选择均值填充?均值填充的步骤实际代码示例总结在数据分析和处理过程中,缺失数

如何使用 Python 读取 Excel 数据

《如何使用Python读取Excel数据》:本文主要介绍使用Python读取Excel数据的详细教程,通过pandas和openpyxl,你可以轻松读取Excel文件,并进行各种数据处理操... 目录使用 python 读取 Excel 数据的详细教程1. 安装必要的依赖2. 读取 Excel 文件3. 读

关于MongoDB图片URL存储异常问题以及解决

《关于MongoDB图片URL存储异常问题以及解决》:本文主要介绍关于MongoDB图片URL存储异常问题以及解决方案,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐... 目录MongoDB图片URL存储异常问题项目场景问题描述原因分析解决方案预防措施js总结MongoDB图

SpringBoot项目中报错The field screenShot exceeds its maximum permitted size of 1048576 bytes.的问题及解决

《SpringBoot项目中报错ThefieldscreenShotexceedsitsmaximumpermittedsizeof1048576bytes.的问题及解决》这篇文章... 目录项目场景问题描述原因分析解决方案总结项目场景javascript提示:项目相关背景:项目场景:基于Spring

解决Maven项目idea找不到本地仓库jar包问题以及使用mvn install:install-file

《解决Maven项目idea找不到本地仓库jar包问题以及使用mvninstall:install-file》:本文主要介绍解决Maven项目idea找不到本地仓库jar包问题以及使用mvnin... 目录Maven项目idea找不到本地仓库jar包以及使用mvn install:install-file基

最详细安装 PostgreSQL方法及常见问题解决

《最详细安装PostgreSQL方法及常见问题解决》:本文主要介绍最详细安装PostgreSQL方法及常见问题解决,介绍了在Windows系统上安装PostgreSQL及Linux系统上安装Po... 目录一、在 Windows 系统上安装 PostgreSQL1. 下载 PostgreSQL 安装包2.

Python使用getopt处理命令行参数示例解析(最佳实践)

《Python使用getopt处理命令行参数示例解析(最佳实践)》getopt模块是Python标准库中一个简单但强大的命令行参数处理工具,它特别适合那些需要快速实现基本命令行参数解析的场景,或者需要... 目录为什么需要处理命令行参数?getopt模块基础实际应用示例与其他参数处理方式的比较常见问http

C 语言中enum枚举的定义和使用小结

《C语言中enum枚举的定义和使用小结》在C语言里,enum(枚举)是一种用户自定义的数据类型,它能够让你创建一组具名的整数常量,下面我会从定义、使用、特性等方面详细介绍enum,感兴趣的朋友一起看... 目录1、引言2、基本定义3、定义枚举变量4、自定义枚举常量的值5、枚举与switch语句结合使用6、枚