vue3 pinia 示例

以下是一个简单的 Vue 3 Pinia 示例：

1. 安装 Pinia：

npm install pinia

2. 在 Vue 应用程序中引入 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')

3. 创建一个 store：

import { defineStore } from 'pinia'

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

4. 在组件中使用 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>

这里只是一个简单的示例，Pinia 还有更多的功能可以使用，如模块化的 store、插件等。详细信息请参阅[官方文档](https://pinia.esm.dev/)。