pinia的使用跟vuex很像，去除了很多没用的api，写法有两种，一种老式的选项式api还有一种组合式api，用哪种根据自己喜好来，以下示例为组合式api

更多教程参考官网：pinia官网https://pinia.vuejs.org/zh/

安装

npm install pinia

配置

import { createPinia } from 'pinia';
import persisted from "pinia-plugin-persistedstate";//持久化插件
import App from './App.vue'
const pinia = createPinia();
const app = createApp(App)
app.use(pinia.use(persisted));//使用pinia以及pinia持久化插件

新建store文件夹=>index.js

引入defineStore方法穿件一个store，主要接收三个参数

参数一：store的唯一key值

参数二：数据存储区以及方法，

参数三：持久化配置（将数据放缓存持久保存）

import {defineStore
} from "pinia"
import {ref
} from "vue"// 首页属性
export const usehomeStore = defineStore('storeKey', () => {let menuState = ref(false)//菜单展开状态const testData = ref('测试');function changeMenuStateFn() {menuState.value = !menuState.value}return {menuState,testData,changeMenuStateFn,}
},
{persist:{enabled:true,//是否开启持久化，对象形式不写默认为开启key:'menuShowState',//存储时候的key值，默认为defineStore的keystorage:"sessionStorage",//存储类型，默认localStoragepaths:['menuState'],//需要持久化的数据，默认全部serializer:{deserialize:()=>{console.log('ooo');},serialize:()=>{console.log('ppp');},},//序列化方法,默认为JSON.parse与JSON.stringifybeforeRestore: (ctx) => {console.log(`即将恢复 '${ctx.store.$id}'`)},afterRestore: (ctx) => {console.log(`刚刚恢复完 '${ctx.store.$id}'`)},}
}
)

页面使用：

使用的时候记得使用一下，因为向外暴露的是一个方法，所以需要调用一下才能获取到值，因为在store里面已经使用ref响应过了 所以无需用ref定义，直接在页面使用即是响应式数据，

注意：此处尽量不要解构，解构会丢失响应式，如果一定要解构请使用storeToRefs,

此方法需要从pinia中导入，

使用示例：示例来自官网

<script setup>
import { storeToRefs } from 'pinia'
const store = useCounterStore()
// `name` 和 `doubleCount` 是响应式的 ref
// 同时通过插件添加的属性也会被提取为 ref
// 并且会跳过所有的 action 或非响应式 (不是 ref 或 reactive) 的属性
const { name, doubleCount } = storeToRefs(store)
// 作为 action 的 increment 可以直接解构
const { increment } = store
</script>

import {usehomeStore,usePublic} from "@/store/index.js"
const homeStore = usehomeStore();
const publicStore = usePublic();
<el-aside class="aside" :width="homeStore.menuState?'60px':'200px'">