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

Posted 2022-12-06 奥特曼　

一、概述

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