pinia 模块化如何使用

Pinia是一个基于Vue.js的状态管理库，它提供了一种模块化的方式来组织和管理应用程序的状态。下面是使用Pinia进行模块化的基本步骤：

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

2. 创建一个Pinia实例：在应用程序的入口文件中，创建一个Pinia实例，并将其作为Vue应用程序的插件引入。

import { createPinia } from 'pinia'

const pinia = createPinia()
app.use(pinia)

3. 创建一个状态模块：在项目中创建一个状态模块，可以通过定义一个包含状态、getter、mutation和action的store对象来实现。

import { defineStore } from 'pinia'

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

4. 在组件中使用状态模块：在Vue组件中，使用`useStore`函数导入状态模块，并在模板或组件逻辑中使用。

import { useCounterStore } from './stores'

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

    return {
      counterStore,
    }
  },
}

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

通过以上步骤，你就可以在Vue应用程序中使用Pinia进行模块化的状态管理了。你可以根据需要创建多个状态模块，并在组件中使用它们来管理应用程序的状态。