Vuex数据持久化存储

Vue项目中使用Vuex作为状态管理，相当于全局的变量存储，可以在所有的vue组件中共享数据、动态修改其状态。vuex是单向数据流，存在vuex中的变量都是响应式数据，组件中一般会通过computed来使用store中的状态、且有缓存

但是当我们去刷新浏览器的时候，store中的状态都会被清空、重新初始化为最初的状态，在某些情况下，我们可能需要将这些状态保存下来，所以这篇来介绍如何让vuex或pinia的状态持久化存储

要实现持久化存储，简单来说就是将其状态保存到localStorage或者sessionStorage中 

然后在给每个状态默认值的时候就从localStorage或sessionStorage中取就可以了也就是咱们直接手写实现，另外一种方式就是使用第三方插件（vuex-persistedstate或者vuex-persist）

方案一：使用sessionStorage或者localStorage存储

我这里是存在sessionStorage中，首先写个类，将存储方法简单封装一下，或者写个方法也可以，甚至直接存都是可以的，看个人喜好哈

utils/index.js 

export class SessionUtils {
  static get(key) {
    return JSON.parse(window.sessionStorage.getItem(key))
  }
  static set(key, value