vue3使用pinia使用

Pinia 是 Vue.js 的状态管理库，它在 Vue 3 中得到了原生支持。Pinia 是基于 Composition API 设计的，相比于 Vue 2 的 Vuex，Pinia 更简洁、更容易使用，并且拥有了更好的 TypeScript 支持。

要使用 Pinia，首先需要安装它：

npm install pinia

然后，在你的 Vue 3 应用中引入并使用 Pinia：

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

const app = createApp(App)

// 创建 Pinia 实例
const pinia = createPinia()

// 将 Pinia 实例添加到 Vue 应用中
app.use(pinia)

app.mount('#app')

接下来，你可以定义你的 store。一个基本的 Pinia store 包含了状态、getters、actions 和选项：

// src/stores/counter.js
import { defineStore } from 'pinia'

export const useCounterStore = defineStore('counter', {
  state: () => {
    return { count: 0 }
  },
  getters: {
    doubleCount: (state) => state.count * 2,
  },
  actions: {
    increment() {
      this.count++
    },
  },
})

在组件中使用 store 的步骤如下：

<template>
  <div>
    <p>Count is: {{ counterStore.count }}</p>
    <p>Double count is: {{ counterStore.doubleCount }}</p>
    <button @click="counterStore.increment">Increment</button>
  </div>
</template>

<script>
import { defineComponent } from 'vue'
import { useCounterStore } from '../stores/counter'

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

    return {
      counterStore,
    }
  },
})
</script>

通过以上步骤，你可以在 Vue 3 应用中成功地使用 Pinia 进行状态管理。