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

相关文章

使用Sentinel自定义返回和实现区分来源方式

《使用Sentinel自定义返回和实现区分来源方式》:本文主要介绍使用Sentinel自定义返回和实现区分来源方式,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教... 目录Sentinel自定义返回和实现区分来源1. 自定义错误返回2. 实现区分来源总结Sentinel自定

Pandas使用SQLite3实战

《Pandas使用SQLite3实战》本文主要介绍了Pandas使用SQLite3实战,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学... 目录1 环境准备2 从 SQLite3VlfrWQzgt 读取数据到 DataFrame基础用法:读

JSON Web Token在登陆中的使用过程

《JSONWebToken在登陆中的使用过程》:本文主要介绍JSONWebToken在登陆中的使用过程,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教... 目录JWT 介绍微服务架构中的 JWT 使用结合微服务网关的 JWT 验证1. 用户登录,生成 JWT2. 自定义过滤

Java中StopWatch的使用示例详解

《Java中StopWatch的使用示例详解》stopWatch是org.springframework.util包下的一个工具类,使用它可直观的输出代码执行耗时,以及执行时间百分比,这篇文章主要介绍... 目录stopWatch 是org.springframework.util 包下的一个工具类,使用它

Java使用Curator进行ZooKeeper操作的详细教程

《Java使用Curator进行ZooKeeper操作的详细教程》ApacheCurator是一个基于ZooKeeper的Java客户端库,它极大地简化了使用ZooKeeper的开发工作,在分布式系统... 目录1、简述2、核心功能2.1 CuratorFramework2.2 Recipes3、示例实践3

springboot security使用jwt认证方式

《springbootsecurity使用jwt认证方式》:本文主要介绍springbootsecurity使用jwt认证方式,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地... 目录前言代码示例依赖定义mapper定义用户信息的实体beansecurity相关的类提供登录接口测试提供一

go中空接口的具体使用

《go中空接口的具体使用》空接口是一种特殊的接口类型,它不包含任何方法,本文主要介绍了go中空接口的具体使用,具有一定的参考价值,感兴趣的可以了解一下... 目录接口-空接口1. 什么是空接口?2. 如何使用空接口?第一,第二,第三,3. 空接口几个要注意的坑坑1:坑2:坑3:接口-空接口1. 什么是空接

springboot security快速使用示例详解

《springbootsecurity快速使用示例详解》:本文主要介绍springbootsecurity快速使用示例,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝... 目录创www.chinasem.cn建spring boot项目生成脚手架配置依赖接口示例代码项目结构启用s

Python如何使用__slots__实现节省内存和性能优化

《Python如何使用__slots__实现节省内存和性能优化》你有想过,一个小小的__slots__能让你的Python类内存消耗直接减半吗,没错,今天咱们要聊的就是这个让人眼前一亮的技巧,感兴趣的... 目录背景:内存吃得满满的类__slots__:你的内存管理小助手举个大概的例子:看看效果如何?1.

java中使用POI生成Excel并导出过程

《java中使用POI生成Excel并导出过程》:本文主要介绍java中使用POI生成Excel并导出过程,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教... 目录需求说明及实现方式需求完成通用代码版本1版本2结果展示type参数为atype参数为b总结注:本文章中代码均为