vue3 封装使用 pinia （可直接使用，包含数据持久化）

在Vue 3中，你可以使用Pinia来创建一个可以直接使用并且支持数据持久化的状态管理库。以下是一个简单的例子，展示如何创建一个使用Pinia的Vue 3应用程序，并包括数据持久化。

首先，确保安装Pinia：

npm install pinia

然后，创建一个Pinia store：

// store.js
import { defineStore } from 'pinia'
import { store } from 'pinia'
import { usePersistedState } from 'pinia-plugin-persistedstate'
 
export const useMainStore = defineStore({
  id: 'main',
  state: () => ({
    counter: 0,
  }),
  actions: {
    increment() {
      this.counter++
    },
  },
})

接着，配置Pinia以使用持久化插件：

// main.js
import { createApp } from 'vue'
import { createPinia } from 'pinia'
import { createPersistedState } from 'pinia-plugin-persistedstate'
 
import { useMainStore } from './store'
 
const app = createApp(App)
 
const pinia = createPinia()
pinia.use(createPersistedState())
 
app.use(pinia)
 
app.mount('#app')

最后，在你的组件中使用store：

<template>
  <div>
    <p>{{ counter }}</p>
    <button @click="increment">Increment</button>
  </div>
</template>
 
<script setup>
import { useMainStore } from './store'
 
const { counter, increment } = useMainStore()
</script>

这个例子展示了如何创建一个简单的Pinia store，并在Vue 3组件中使用它。usePersistedState 是一个自定义的hook，它允许你在Pinia store的state中持久化数据。这样，即使刷新页面，store中的数据也会被保存下来。