vue3 pinia 存取

以下是使用Vue3 Pinia进行状态存取的示例：

1. 首先，您需要安装Pinia：

npm install pinia

2. 在您的Vue应用程序中，您需要创建一个Pinia实例并将其添加到Vue应用程序中：

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

const pinia = createPinia()

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

3. 接下来，您需要定义一个状态存储库。在这个存储库中，您可以定义状态和操作：

import { defineStore } from 'pinia'

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

4. 现在，您可以在Vue组件中使用该存储库：

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

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

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

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

在上面的示例中，我们使用`useCounterStore`函数从存储库中获取`count`状态和`increment`操作，并将它们绑定到Vue组件中。