vue中pinia的使用

要在Vue中使用Pinia，需要执行以下步骤：

1. 安装Pinia：可以使用npm或yarn安装Pinia库。

npm install pinia

1. 创建一个Pinia实例：在Vue应用程序的入口文件中，创建一个Pinia实例，并将其挂载到Vue应用程序中。

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

const app = createApp(App)
const pinia = createPinia()

// 将pinia实例挂载到app对象中
app.use(pinia)
app.mount('#app')

1. 定义和注册模块：使用Pinia的defineStore函数来定义和注册模块。

import { defineStore } from 'pinia'

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

1. 在组件中使用模块：在需要使用状态的组件中，使用useStore函数来获取对应的模块。

import { useCounterStore } from './store'

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

    return {
      counter: counterStore.count,
      increment: counterStore.increment,
      decrement: counterStore.decrement,
    }
  },
}

1. 在模板中使用状态：在模板中使用组件中暴露的状态和方法。

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

以上步骤完成后，你就可以在Vue应用程序中使用Pinia来管理状态了。

详细使用参考pinia官网：Pinia | The intuitive store for Vue.js (vuejs.org)