vue3 pinia写法

Vue 3 是一个非常强大的 JavaScript 框架，而 Pinia 是一个简单而强大的状态管理库。在 Vue 3 中，你可以使用 Pinia 来管理全局状态和局部状态。下面是一个简单的介绍Vue 3中Pinia的写法。

首先，在你的项目中安装 Pinia 依赖：

npm install pinia

接着，创建一个 store.js 文件，并编写你的 Pinia Store。例如：

import { createPinia } from 'pinia'

const pinia = createPinia()

export const useCounterStore = pinia.createStore({
  state: () => ({
    count: 0
  }),
  actions: {
    increment() {
      this.count++
    }
  }
})

在上面的代码中，我们首先引入了 Pinia 的 createPinia 方法，并使用它创建了一个新的 pinia 实例。然后我们使用 `createStore` 方法创建了一个名为 `useCounterStore` 的 store，其中包含一个 `count` 状态和一个 `increment` action，用于增加 `count` 的值。

在你的组件中使用这个 store，你需要先引入它：

import { useCounterStore } from './store.js'

然后在组件中使用这个 store：

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

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

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

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

在上面的代码中，我们通过 `useCounterStore()` 方法获取了 `useCounterStore` store 的实例，并将其返回的 `count` 和 `increment` 绑定到组件中。

至此，你已经完成了使用 Pinia 管理状态的全部过程。当然，还有很多高级用法需要深入学习。下面是相关问题：