Pinia配置持久化（在ts中使用setup模式）无报错版本

 1、安装pinia-plugin-persistedstate

npm i pinia-plugin-persistedstate
# 或
pnpm i pinia-plugin-persistedstate
# 或
yarn add pinia-plugin-persistedstate

  2、main.ts配置

import { createApp } from 'vue'
import { createPinia } from 'pinia'


import piniaPluginPersistedstate from 'pinia-plugin-persistedstate' //引入持久化插件
import App from './App.vue'


const app = createApp(App)

const pinia = createPinia()

pinia.use(piniaPluginPersistedstate)
app.use(pinia)

3、创建store  定义变量insId和方法setId 设置持久化（默认是localstorage）

import { ref } from 'vue'
import { defineStore } from 'pinia'

// 使用setup模式定义
export const insIdStore = defineStore(
  'insId',
  () => {
    const insId = ref<any>(0)
    const setId = (id: any) => {
      insId.value = id
    }

    return { insId, setId }
  },
 //默认配置  本地存储
  { persist: true }
)

 4、当你不想使用默认本地存储  使用会话存储

import { ref } from 'vue'
import { defineStore } from 'pinia'

// 使用setup模式定义
export const insIdStore = defineStore(
  'insId',
  () => {
    const insId = ref<any>(0)
    const setId = (id: any) => {
      insId.value = id
    }

    return { insId, setId }
  },
 
   {
     persist: {
       key: 'insIdStore', //存储名称
       storage: sessionStorage, // 存储方式
       paths: ['insId']
     }
   }
)

5、组件中使用 方法和变量解构方式不一样变量需要用storeToRefs 保持响应式

import { insIdStore } from '../../stores/insuiList'
import { storeToRefs } from 'pinia'
const { setId } = insIdStore()
const { insId } = storeToRefs(insIdStore())
//setup中
setId(value.value)
console.log(insId.value, '机构id')