解决vue3中全局状态管理工具pinia持久化

最近pinia上线在了vue的官方文档中替代了一起的vuex的位置，研究了一下，简直不要太pinia了，比vuex用法简单太多了。用法官网有讲，这里讲讲没有的：

pinia和vuex一样作为全局的状态管理工具，都会在页面刷新以后，丢失全局状态，在使用pinia时可以使用pinia的插件persist进行持久化存储在本地sessionStorage或者localStorage中，但是在使用这个插件时发现了一个问题，就是在页面更改全局属性的同时，保存在本地的数据也在同时更改，这就导致了循环引用的错误，当你点击一个标签添加全局的某个属性时就会报错：

TypeError:Converting circular structure to JSON TypeError。导致这个错误的原因其实就是组件中数数据和本地存储中的对象发生了双向引用的情况，你引用我我引用你能不报错吗

解决办法：自定义监听事件：在App.vue中监听页面加载，如果页面有加载，就将当前的store对象序列化保存在本地存储中，当组件创建完成以后，再讲本地存储的数据反序列化保存到store中，原理上与插件相同，注意这里不要用JSON.stringify、JSON.parse进行深拷贝，不然会同样引发循环引用的问题

使用circular-json对数据进行浅拷贝：

安装  npm install -S circular-json

App.vue文件中：

import { myStore } from '@/store'
import CircularJSON from 'circular-json'

export default {
  created() {
    // pinia可持久化存储
    var piniaStore = usePiniaStore()
    // 添加监听页面加载的事件
    window.addEventListener("beforeunload", () => {
      window.sessionStorage.setItem("mianStore", CircularJSON.stringify(piniaStore.$state))  // 页面刷新时将pinia的数据转换为str保存在sessionSrtorage中
    })

    // 获取存储的pinia数据，并转换为js对象
    if (window.sessionStorage.getItem("mianStore")) {
      //将存储的pinia数据重新复制到pinia中
      Object.assign(piniaStore.$state, CircularJSON.parse(window.sessionStorage.getItem("mianStore")))
    }
  }
}