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

一、概述

Pinia是 Vue 的存储库，它允许您跨组件/页面共享状态，与vuex功能一样。

（1）为什么不在用vuex了呢?

官网解释：Pinia 最初是为了探索 Vuex 的下一次迭代会是什么样子，结合了 Vuex 5 核心团队讨论中的许多想法。最终，我们意识到 Pinia 已经实现了我们在 Vuex 5 中想要的大部分内容，并决定实现它 取而代之的是新的建议。

与 Vuex 相比，Pinia 提供了一个更简单的 API，具有更少的规范，提供了 Composition-API 风格的 API，最重要的是，在与 TypeScript 一起使用时具有可靠的类型推断支持。

（2）与 Vuex 3.x/4.x 的比较

Pinia API 与 Vuex ≤4 有很大不同，即：

• mutations 不再存在。他们经常被认为是 非常 冗长。他们最初带来了 devtools 集成，但这不再是问题。
• 无需创建自定义复杂包装器来支持 TypeScript，所有内容都是类型化的，并且 API 的设计方式尽可能利用 TS 类型推断。
• 不再需要注入、导入函数、调用函数、享受自动完成功能！
• 无需动态添加 Store，默认情况下它们都是动态的，您甚至都不会注意到。请注意，您仍然可以随时手动使用 Store 进行注册，但因为它是自动的，您无需担心。
• 不再有 modules 的嵌套结构。您仍然可以通过在另一个 Store 中导入和 使用 来隐式嵌套 Store，但 Pinia 通过设计提供平面结构，同时仍然支持 Store 之间的交叉组合方式。 您甚至可以拥有 Store 的循环依赖关系。
• 没有 命名空间模块。鉴于 Store 的扁平架构，“命名空间” Store 是其定义方式所固有的，您可以说所有 Store 都是命名空间的。

二、基本使用

1.安装pinia

yarn add pinia
# 或者使用 npm
npm install pinia

2. store/counter.ts

语法： defineStore(仓库id,( )=>{
        const x = 1
}) 

import { ref, computed } from "vue";
import { defineStore } from "pinia";
 
export const useCounterStore = defineStore("counter", () => {
  const count = ref(0);
  const doubleCount = computed(() => count.value * 2);
  function increment() {
    count.value++;
  }
 
  return { count, doubleCount, increment };
});

可以在方法内定义变量、方法（包括异步同步），书写起来和Composition API几乎一样，如果页面要使用记得return出变量或方法，如果你不熟悉Composition API 可参考 vue使用pinia (vue2/vue3) 其他使用方式

由于 pinia不再有modules 如果想定义其他仓库，可新建相同文件格式，注意要更换仓库id 

3.main.ts

import { createApp } from 'vue'
import { createPinia } from 'pinia'
import persist from 'pinia-plugin-persistedstate'  //持久化插件
const app = createApp(App)
app.use(createPinia().use(persist))

这也是vite构建工具提供给我们的例子

如果你要持久化 需要安装插件 若不需要则不需引入

pnpm i pinia-plugin-persistedstate
# or
npm i pinia-plugin-persistedstate
# or
yarn add pinia-plugin-persistedstate

三、封装pinia

1.store/index.ts

概述 main.ts里的createPinia 直接在store里面做，包括引入持久化插件 省去main.ts的冗余  （它能做的我也能做）

import { createPinia } from 'pinia'
import persist from 'pinia-plugin-persistedstate' //导入持久化插件
 
// 创建pinia实例
const pinia = createPinia()
// 使用pinia插件
pinia.use(persist)
// 导出pinia实例，给main使用
export default pinia
export * from './user'  //多个模块同理导出
 

2.store/user.ts

单纯举个模板例子

import type { User } from '@/types/user'
import { defineStore } from 'pinia'
import { ref } from 'vue'
 
export const useUserStore = defineStore('cp-user', () => {
  // 用户信息
  const user = ref<User>()
  // 设置用户，登录后使用
  const setUser = (u: User) => {
    user.value = u
  }
  // 清空用户，退出后使用
  const delUser = () => {
    user.value = undefined
  }
  return { user, setUser, delUser }
}, {
  persist:true // 开启持久化
})

3.main.ts

import { createApp } from 'vue'
import pinia from './stores'
import App from './App.vue'
app.use(pinia)
app.mount('#app')

4. 使用

import { useUserStore } from '@/stores'
const store = useUserStore()

调用出来的 store 就是当前仓库的数据啦，直接store.变量/方法 即用