Pinia 是 Vue 的存储库，它允许您跨组件/页面共享状态。在 Vue 3 中使用 Pinia，你可以按照以下步骤进行操作：
安装 Pinia：在你的 Vue 3 项目中，通过 npm 或 yarn 安装 Pinia
npm install pinia
创建 Pinia 存储：在你的项目中创建一个 Pinia 存储，该存储将包含你的应用程序状态和相关逻辑
// store.js import { createPinia } from 'pinia'; const pinia = createPinia(); export default pinia;
注册 Pinia 存储：在你的应用程序入口文件（通常是 main.js）中注册 Pinia 存储
import { createApp } from 'vue'; import pinia from './store'; import App from './App.vue'; const app = createApp(App); app.use(pinia); app.mount('#app');
创建和使用 Pinia 模块：在 store.js 文件中，你可以创建和导出一个 Pinia 模块
// store.js import { defineStore } from 'pinia'; export const useCounterStore = defineStore('counter', { state: () => ({ count: 0, }), actions: { increment() { this.count++; }, decrement() { this.count--; }, }, });
在组件中使用 Pinia 模块：在你的 Vue 3 组件中，可以使用 useStore 函数来获取 Pinia 模块的实例
<template> <div> <p>Count: {{ count }}</p> <button @click="increment">Increment</button> <button @click="decrement">Decrement</button> </div> </template> <script> import { useCounterStore } from './store'; export default { setup() { const counterStore = useCounterStore(); return { count: counterStore.count, increment: counterStore.increment, decrement: counterStore.decrement, }; }, }; </script>
在上述示例中，我们首先导入 useCounterStore 函数来获取一个 CounterStore 的实例。然后，我们在组件的 setup 钩子函数中使用该实例的属性和方法。
这样，你就可以在 Vue 3 中使用 Pinia 来管理应用程序的状态了。你可以创建多个 Pinia 模块来管理不同的状态，并在组件中使用这些模块。
