Pinia 如何在项目中使用？

Pinia 是一个现代的、轻量级的状态管理库，专为 Vue 3 设计。它简化了 Vuex 的复杂性，提供了更直观和灵活的方式来管理应用的状态。下面详细介绍 Pinia 的基本概念、安装、配置和使用方法。

---

1. 先安装对应的包

npm  add pinia

2. 在项目中注册

/main.ts

import { createApp } from "vue";
import "./style.css";
import App from "./App.vue";
import "normalize.css";
import "@/styles/common.less";
import router from '@/router/index.ts'
import { createPinia } from "pinia";

// 创建实例 app
const app = createApp(App)
// 在 app 安装插件 router
app.use(router)
// 注册使用 Pinia
app.use(createPinia())
// 挂载到 app
app.mount("#app");

3. 创建文件夹，代码实现管理category模块的数据

src\store\modules\category.ts

import { defineStore } from "pinia";

export default defineStore('category', {
    state: () => ({
        money: 100
    })
})

4. 创建文件夹，统一管理所有的 pinia 模块

src\store\index.tsx

import useCategoryStore from "./modules/category";

export default function useStore(): any {
  return {
    category: useCategoryStore(),
  };
}

5. 找个地方验证一下，是否生效

import useStore from '@/store'
const { category } = useStore()

console.log(category.money)