官方地址：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);})