一、概述

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.变量/方法即用

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