vuex持久化实现网页刷新vuex内容不重载（代码附上）

---

前言

怎么说呢，在开发一个企业的项目的时候，由于自己刚刚毕业，技术面还不够广，认识的东西也不深，而且最可悲的是全都得去自己琢磨，苦命人！！
业务需求，在想怎么保证刷新之后不用重复登录呢？？因为页面刷新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
文档很齐全，感兴趣可以自己去看看喔！！！