首页 > 编程学习 > 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.变量/方法 即用

Copyright © 2010-2022 dgrt.cn 版权所有 |关于我们| 联系方式