vue3 使用pinia

Vue 3 是一个流行的 JavaScript 框架，而 Pinia 则是一个基于 Vue 3 的状态管理库。Pinia 提供了一种简单、直观的方式来管理应用程序的状态，并且与 Vue 3 的响应式系统紧密集成。

要在 Vue 3 中使用 Pinia，首先需要安装 Pinia 包。您可以通过运行以下命令来安装 Pinia：

npm install pinia

在您的 Vue 3 项目中，您需要创建一个 Pinia 实例并注册它作为 Vue 插件。您可以在主入口文件（通常是 `main.js` 或 `main.ts`）中执行此操作。下面是一个简单的示例：

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（或多个 store）来管理您的应用程序状态。一个 store 是一个带有状态和操作的对象，您可以在组件中使用它。

例如，创建一个名为 `counter` 的 store，它具有一个 `count` 状态和一个增加计数的操作：

import { defineStore } from 'pinia'

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

然后，在组件中使用该 store：

<template>
  <div>
    <p>Count: {{ counter.count }}</p>
    <button @click="counter.increment()">Increment</button>
  </div>
</template>

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

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

    return {
      counter
    }
  }
}
</script>

通过这种方式，您可以在 Vue 3 中使用 Pinia 进行状态管理。Pinia 还提供了许多其他功能，如模块化、插件支持和严格模式。您可以查阅 Pinia 文档以获取更多信息和示例：https://pinia.esm.dev/