官方地址：Pinia | The intuitive store for Vue.js (vuejs.org)https://pinia.vuejs.org/

1.安裝

npm install pinia   
npm install pinia-plugin-persistedstate

Pinia是一個基于Vue 3的狀態管理庫，它使得管理Vue的全局狀態變得更加容易和直觀。

而pinia-plugin-persistedstate是 Pinia 的官方插件之一，它提供了一種將 Pinia 狀態持久化到本地存儲的方式，以確保狀態數據在刷新或關閉頁面后仍然存在。

換句話說，Pinia是用于管理Vue 3應用程序的狀態管理庫，而pinia-plugin-persistedstate是為Pinia提供的一個插件，它允許您將Vue應用程序中的狀態保存到本地存儲中，以便在下一次訪問應用程序時恢復狀態。

2.新建store/pinia.ts

//引入pina
import { createPinia,defineStore } from 'pinia'
import piniaPluginPersistedstate from 'pinia-plugin-persistedstate'const pinia = createPinia()
pinia.use(piniaPluginPersistedstate)export default piniaconst wmsStore = defineStore('wmsStore', {state: () => {return {name: '游客',isMenuCollapse:false}},persist: {key: 'wms-store',storage: localStorage,},
})export  {wmsStore}

3.在main.ts文件引入pina組件

//引入pina
import pinia from '@/store/pinia'const app = createApp(App)app.use(pinia)

4. 使用變量

 import  { wmsStore } from '@/store/pinia'const wmsstore = wmsStore()
onMounted(()=>{console.log(wmsstore.name);  //沒有下面的重新賦值，依舊是游客wmsstore.name = "張三" //加入這句代碼兩次的打印都是張三console.log(wmsstore.name);})