pinia地址：

开始 | Pinia

插件地址：

快速开始 | pinia-plugin-persistedstate

先安装pinia

npm install pinia

再安装插件

安装pinia后，再安装这个插件

npm i pinia-plugin-persistedstate

全局中引入持久化插件

在src目录下的main.ts或者main.js里

//main.ts或者main.js里import { createApp } from 'vue'
import App from './App.vue'
import { createPinia } from 'pinia'//注意下面没有{}
import piniaPluginPersistedstate from 'pinia-plugin-persistedstate'const app = createApp(App)
const pinia = createPinia()             //创建pinia
pinia.use(piniaPluginPersistedstate)    //把pinia插件，注册到pinia中
app.use(pinia)
app.mount('#app')

持久化插件配置：

stores目录下的userStore.js （根据实际使用选择）

所有数据持久化配置。

import {ref, computed, reactive} from 'vue'
import {defineStore} from 'pinia'  //只引入pinia就可以了export const useUserStore = defineStore('user', () => {const userInfo = reactive({})return {userInfo}}, //这里是第三个参数{persist: true  //加上这一个，所有的数据都可以持久化}
)

指定数据持久化配置。

import {ref, computed, reactive} from 'vue'
import {defineStore} from 'pinia'  //只引入pinia就可以了export const useUserStore = defineStore('user', () => {const userInfo = reactive({})return {userInfo}}, //这里是第三个参数{persist: {paths: ['name', 'info.des'] //指定 name, info.des持久化},}
)

使用插件：

赋值，持久化的数据

<script setup>
//引入配置好的store
import {useUserStore} from "@/stores/userStore.js"
//实例化store
const userStore = useUserStore()//...一堆逻辑后面赋值且自动持久化，使用的是‘所有数据持久化配置’userStore.$patch({userInfo:res2.data
})
</script>

调用，持久化的数据

<script setup>
//引入配置好的store
import {useUserStore} from "../stores/userStore.js";
//实例化store
const userStore = useUserStore()
</script><template>
<!--template中调用store内的信息--><div>{{ userStore.userInfo }}</div>
</template>

清空，持久化的数据

<script setup>
//引入配置好的store
import {useUserStore} from "@/stores/userStore.js"
//实例化store
const userStore = useUserStore()//清空持久化数据userInfouserStore.$patch({userInfo:{}})//下面这种写法，虽然可以清空，但是无法再次赋值，强制不推荐使用
//userStore.userInfo = {}
</script>