vue3中 pinia用法

在Vue 3中，Pinia 是一个状态管理库，它提供了一种简单且可扩展的方式来管理应用程序的状态。下面是在Vue 3中使用Pinia的基本用法示例：

1. 安装Pinia：

npm install pinia

2. 创建一个Pinia实例：

import { createPinia } from 'pinia'

const pinia = createPinia()

3. 在Vue应用程序的根组件中使用Pinia：

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

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

4. 创建一个Store：

import { defineStore } from 'pinia'

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

5. 在组件中使用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的示例，你可以根据自己的需求定义和使用不同的Store，并在组件中引用和操作相应的状态和方法。Pinia还提供了更多高级功能，例如模块化、插件等，你可以查阅Pinia的文档以获取更详细的信息。