vue3使用pinia配合pinia-plugin-persist实现持久化参数及全局数据监听，实现静态同步刷新

第一步安装插件pinia和pinia-plugin-persist

npm install pinia

npm install pinia-plugin-persist

第二步在main.js引入使用插件

import { createApp } from 'vue'
import App from './App.vue'
import router from './router/index'

// 引入pinia仓库
import { createPinia } from 'pinia'
// 持久化存储pinia
import piniaPluginPersist from 'pinia-plugin-persist'
const store = createPinia()
store.use(piniaPluginPersist)

//全局注入
const app = createApp(App)
app.use(store)
//注意use要在mount之前
app.use(router)
app.mount('#app')

第三步创建存储文件，例如我要存储一个本地用户信息的数据userinfoData

import { defineStore } from 'pinia'

export const userdataStore = defineStore('userdata', {
  // 静态数据
  state: () => {
    return {
      userinfoData: null //存贮参数
    }
  },
  persist: {
    enabled: true,
    // 自定义持久化参数
    strategies: [
      {
        // 自定义key
        key: 'Userinfo',
        // 自定义存储方式，默认sessionStorage
        storage: localStorage,
        // 指定要持久化的数据，默认所有 state 都会进行缓存，可以通过 paths 指定要持久化的字段，其他的则不会进行持久化。
        paths: ['userinfoData']
      }
    ]
  },
  // 相当于计算属性(有数据缓存)
  getters: {
    getUserinfo(state) {
      return state.userinfoData
    }
  },
  // actions即可以是同步函数也可以是异步函数
  actions: {
    changeUserinfo(userinfoData) {
      this.userinfoData = userinfoData
    }
  }
})

第四步在页面中使用及变更数据

userInfo.vue

第五步在全局页面进行监听修改全局模块数据

index.vue

到此就可以实现两个页面模块之前的数据同步了~