pinia怎么用

Pinia 是一个基于 Vue 3 的状态管理库，它提供了一种简单、直观的方式来管理应用程序的状态。下面是一些使用 Pinia 的基本步骤：

1. 安装 Pinia

你可以通过 npm 安装 Pinia：

npm install pinia

2. 创建 Pinia 实例

在根组件中创建一个 Pinia 实例，并将其注入到应用程序中：

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. 创建 store

使用 `defineStore` 函数创建一个 store：

import { defineStore } from 'pinia'

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

在上面的代码中，我们创建了一个名为 `useCounterStore` 的 store，它包含一个名为 `count` 的状态和一个名为 `increment` 的 action。

4. 在组件中使用 store

使用 `useStore` 函数将 store 绑定到组件上下文中：

import { useStore } from 'pinia'
import { useCounterStore } from './store'

export default {
  setup() {
    const store = useStore(useCounterStore)

    return {
      store
    }
  }
}

现在，我们可以在组件中使用 store 中的状态和 action：

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

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

export default {
  setup() {
    const store = useStore(useCounterStore)

    return {
      store
    }
  }
}
</script>

这是一个简单的使用 Pinia 的例子，你可以通过阅读 Pinia 的官方文档来了解更多细节。