vue3中模块化使用pinia

在Vue3中，可以使用Pinia来实现模块化状态管理。Pinia是一个基于Vue3的状态管理库，它提供了类似于Vuex的功能，但是更加轻量级和易于使用。

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

npm install pinia

然后在Vue应用程序的入口文件中创建一个Pinia实例：

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

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

app.use(pinia)
app.mount('#app')

接下来，可以创建一个Pinia store：

import { defineStore } from 'pinia'

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

在组件中使用该store：

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

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

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

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