Vuex持久化 插件 vuex-persistedstate

手动实现：

1、调用接口获取token

2、一式两份 vuex + localStorage

3、vuex初始化的时候 优先从本地取 取不到才初始化为空 ( state:{ token:getToken() || ' ' })

为什么采取这个方案？

vuex ：基于内存的方案 存取速度特别快 基于vuex模式使用方便，缺点：刷新丢失

ls: 基于磁盘的方案 存取速度慢 没有vuex方便， 优势：刷新不丢失

场景：token 想要vuex存取速度快和vue配合灵活 还想要刷新不丢失 +ls

 自动化实现：

使用插件vuex-persistedstate来支持vuex的状态持久化

完成vuex中的数据和ls自动同步，此插件兼容vue2和vue3

1、安装插件：npm i vuex-persistedstate

2、使用：修改state数据就会触发自动同步本地机制 

插件说明  

1. 默认是存储在localStorage中，可以对存储的方法进行自定义

2. key是存储数据的键名

3. paths是存储state中的那些数据，如果是模块下具体的数据需要加上模块名称，如user.token

4. 修改state中的数据即可触发同步机制，可以看到本地存储数据的的变化，每次修改只要数据变了就会自动把vuex同步到ls；刷新的时候会自动从ls取然后同步到vuex

使用sessionStorage 存储

 使用cookies 存储

1、下载插件 js-cookie 用来操作cookies

2、引入js-cookie插件 用来操作cookie import * as Cookies from 'js-cookie'

3、配置插件