为什么要使用 Pinia？

Pinia 是 Vue 的存储库，它允许您跨组件/页面共享状态

Pinia 最初是为了探索 Vuex 的下一次迭代会是什么样子，结合了 Vuex 5 核心团队讨论中的许多想法。最终，我们意识到 Pinia 已经实现了我们在 Vuex 5 中想要的大部分内容，并决定实现它 取而代之的是新的建议

与 Vuex 相比，Pinia 提供了一个更简单的 API，具有更少的规范

官方文档：https://pinia.vuejs.org/

中文文档：https://pinia.web3doc.top/

基本示例

import { defineStore  } from "pinia"
export const useCountStore = defineStore("count",{
    state:() =>{
        return{
            count:10
        }
    }
})

在组件中使用

xxxxxxxxxx
<template>
    <p>Count:{{ store.count }}</p>
</template>
<script setup>
import { useCountStore } from "../stores/count"
const store = useCountStore();
</script>