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()
//清空持久化数据userInfo
userStore.$patch({
userInfo:{}
})
//下面这种写法，虽然可以清空，但是无法再次赋值，强制不推荐使用
//userStore.userInfo = {}
</script>
