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的key
storage:"sessionStorage",//存储类型，默认localStorage
paths:['menuState'],//需要持久化的数据，默认全部
serializer:{
deserialize:()=>{
console.log('ooo');
},
serialize:()=>{
console.log('ppp');
},
},//序列化方法,默认为JSON.parse与JSON.stringify
beforeRestore: (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'">
