前言
怎么说呢,在开发一个企业的项目的时候,由于自己刚刚毕业,技术面还不够广,认识的东西也不深,而且最可悲的是全都得去自己琢磨,苦命人!!
业务需求,在想怎么保证刷新之后不用重复登录呢??因为页面刷新vuex的内容都会被重载!懂得都懂。
一、有什么办法解决?
1.cookie
首先想到的便是前端的cookie,但是一存一取,过程麻烦上天,而且有些浏览器,例如谷歌有时候还会询问能不能存cookie,就很烦。而且cookie存的东西并不大。
2.localstorage
本地存储,但是存储一言难尽,虽然也很好用,但是项目不太适合。这里摘抄一丢丢解释。
localStorage理论上来说是永久有效的,即不主动清空的话就不会消失,即使保存的数据超出了浏览器所规定的大小,也不会把旧数据清空而只会报错。但需要注意的是,在移动设备上的浏览器或各Native App用到的WebView里,localStorage都是不可靠的,可能会因为各种原因(比如说退出App、网络切换、内存不足等原因)被清空。
而个人的需求则是想在关闭网页之后,把所有内容都进行清除。显然不太合适。
3.sessionStorage
sessionStorage的生存期顾名思义,类似于session,只要关闭浏览器(也包括浏览器的标签页),就会被清空。由于sessionStorage的生存期太短,因此应用场景很有限,但从另一方面来看,不容易出现异常情况,比较可靠。
诶,就很好,适应很强,也很符合我的需求。
有了方向就开干!!!
后面经过查资料,有了解过持久化vuex这东西,他的前提条件也是通过前面三种方式进行实现,已达到内容不重载的需求!!
下面着重用该插件进行实现!!
二、环境准备
1.引入库
用到的插件是vuex-persistedstate
这是我用的版本
先装上!!!
npm install --save vuex-persistedstate
2.在vuex中引用
进入store里面的index.js文件(vue3版本),引入该插件
代码如下(示例):
import persistedstate from "vuex-persistedstate";
在配置项中引入
plugins: [persistedstate({ storage: sessionStorage })],
由于项目需要,所以这里用到的是sessionStorage,这里前面介绍的三种方式,这个插件都支持,所以兼容性还是蛮好的!!
就这样很简单,就可以了!!
附上我的vuex完整代码!!
import Vue from "vue";
import Vuex from "vuex";
import persistedstate from "vuex-persistedstate";
Vue.use(Vuex);
export default new Vuex.Store({
plugins: [persistedstate({ storage: sessionStorage })],
state: {
//用户信息
user: {
info: {},
validArticle: 0,
token: "",
},
},
getters: {
},
mutations: {
getusertoken(state, val) {
state.user.token = val;
},
},
actions: {},
modules: {},
});
这里的话我就拿用户的token进举例
!!!注意,一定要用方法,在mutations中进行存值操作,反正我第一次用直接使用this.$store.state.user.token这种方式存储,插件不生效,我也不知道为什么,是什么原因,这种方式是没问题的
三、验证代码是否可用
首先先通过commit调用vuex中的存值方法进行存值操作
this.$store.commit('getusertoken', 'aaaaa')
查看结果,这个插件如果不适用其他配置项默认是把vuex中state中的所有内容进行存储,而且key的名称为vuex
在任意vue文件中的mounted函数中都可以打印出来查看,附上代码
console.log(sessionStorage.getItem('vuex'))
我现在还在使用中,是没问题的,后续有问题可以留言一起解决!!
就这样就已经最简单的配置完成,f5刷新,vuex的内容也不会消失,除非你关闭网页!!
附上插件配置项
项目赶进度没仔细研究,后面在慢慢补充
插件官网github:https://github.com/robinvdvleuten/vuex-persistedstate
文档很齐全,感兴趣可以自己去看看喔!!!