vue3项目中怎么Pinia

Pinia是一个基于Vue3的状态管理库，可以用于处理Vue应用程序中的全局状态。下面是在Vue3项目中如何使用Pinia的步骤：

安装 Pinia：

npm install pinia

在 main.js 中导入并安装 Pinia：

import { createApp } from 'vue'
import { createPinia } from 'pinia'
import App from './App.vue'

const app = createApp(App)
const pinia = createPinia()

app.use(pinia)
app.mount('#app')

创建 Pinia store：

import { defineStore } from 'pinia'

export const useCounterStore = defineStore('counter', {
  state: () => ({
    count: 0
  }),
  actions: {
    increment() {
      this.count++
    },
    decrement() {
      this.count--
    }
  }
})

在组件中使用 Pinia store：

<template>
  <div>
    <p>Count: {{ count }}</p>
    <button @click="increment">Increment</button>
    <button @click="decrement">Decrement</button>
  </div>
</template>

<script>
import { useCounterStore } from './stores/counter'

export default {
  setup() {
    const counterStore = useCounterStore()

    return {
      count: counterStore.count,
      increment: counterStore.increment,
      decrement: counterStore.decrement
    }
  }
}
</script>

以上是使用Pinia的基本步骤。Pinia还提供了更多高级特性，如插件、严格模式、热重载等功能。你可以参考官方文档深入学习如何使用Pinia。