vue3的pinia使用

Vue 3的状态管理库Pinia是一个轻量级、可扩展的状态管理解决方案。下面是如何使用Pinia的简单示例：

首先，在你的Vue 3项目中安装Pinia：

npm install pinia

然后，在你的main.js或者入口文件中创建一个Pinia实例并将其挂载到Vue应用上：

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() {
    return {
      count: 0
    }
  },
  actions: {
    increment() {
      this.count++
    },
    decrement() {
      this.count--
    }
  }
})

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

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

<script>
import { useCounterStore } from './store'

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

    return {
      counter
    }
  }
}
</script>

在这个例子中，我们创建了一个名为`counter`的store，它包含了一个名为`count`的状态和两个操作`increment`和`decrement`。在组件中，我们使用了`useCounterStore`函数来创建一个与该store相关联的实例，并在模板中使用该实例来访问状态和操作。

这就是一个简单的Pinia使用示例。你可以根据你的项目需求定义更多的store，并在组件中使用它们来管理状态。希望对你有所帮助！