前端开发小技巧 - 【Vue3 + TS】 - 在 TS + Vue3 中使用 Pinia,实现 Pinia 的持久化,优化Pinia(仓库统一管理)
时间:2024-04-22 08:20:36 来源:网络cs 作者:利杜鹃 栏目:卖家故事 阅读:
阅读本书更多章节>>>>
3.1、安装
3.2、将插件添加到
目标文件:3.3、在
给 4.1、
以往: 初始化代码都在 4.2、仓库(
以往: 使用一个仓库
前言
ts
中使用 pinia
和 Vue3
基本一致,唯一的不同点在于,需要根据接口文档给 state
标注类型,也要给 actions
标注类型;以下都是 组合式API 的写法,选项式API 的写法大家可以去官网看看; Pinia;持久化插件 - pinia-plugin-persistedstate; 一、定义类型文件
目标文件:src/types/user.d.ts
(这里以user.d.ts
为例);代码展示:export type User = { token: string; refreshToken: string; avatar: string; // 头像 mobile: string; // 脱敏手机号 - 带星号的手机号 account: string; // 用户名 id: string; // 用户id};
二、创建 store
目标文件:src/stores/user.ts
;代码展示:import { defineStore } from 'pinia';import { ref } from 'vue';import type { User } from '@/types/user';export const useUserStore = defineStore('user', () => { const userInfo = ref<User>(); const setUserInfo = (u: User) => { userInfo.value = u; }; const delUserInfo = () => { // undefined 是 window 身上的一个属性,大厂里面不推荐直接用 undefined 给变量赋值 // void 是用来创建 undefined,不管它后面跟个啥,得到的都是 undefined; userInfo.value = void 0; // 上面的代码等价于下面这个,但是上面的代码更好 // userInfo.value = undefined; } return { userInfo, setUserInfo, delUserInfo }});
三、实现 Pinia 的持久化
以往做法: 按照以前的做法是自己手写封装一个函数(setStorage()、getStorage()、delStorage()
),需要使用的时候进行导入使用;这种做法太麻烦了,在 Vue3
中我们可以安装一个插件,进行配置,会自动帮我们实现 Pinia
的持久化; 3.1、安装 Pinia
持久化插件:
pnpm i pinia-plugin-persistedstateyarn add pinia-plugin-persistedstatenpm i pinia-plugin-persistedstate
3.2、将插件添加到 Pinia
的实例上
目标文件:src/main.ts
代码展示:import { createPinia } from 'pinia';import persist from 'pinia-plugin-persistedstate';const pinia = createPinia();pinia.use(persist);
3.3、在 Store
中使用
给 defineStore()
添加第三个参数(配置对象);代码展示:import { defineStore } from 'pinia';import { ref } from 'vue';import type { User } from '@/types/user';export const useUserStore = defineStore('user', () => { const userInfo = ref<User>(); const setUserInfo = (u: User) => { userInfo.value = u; }; const delUSerInfo = () => { // undefined 是 window 身上的一个属性,大厂里面不推荐直接用 undefined 给变量赋值 // void 是用来创建 undefined,不管它后面跟个啥,得到的都是 undefined; userInfo.value = void 0; // 上面的代码等价于下面这个,但是上面的代码更好 // userInfo.value = undefined; } return { userInfo, setUserInfo, delUserInfo }}, { persist: true });
3.4、验证
在App.vue
中随便定义两个按钮;模拟 登录和 退出登录;将 useUserStore
导入到 App.vue
中,调用 setUserInfo() 和 delUserInfo()
,查看 localStorage
; 四、仓库(store)统一管理
仓库(store
)的统一管理分两步: pinia
独立维护;仓库(store
)统一导出; 4.1、pinia
独立维护
以往: 初始化代码都在 main.ts
中,仓库代码在 stores
文件夹中,代码分散职能不单一; 优化处理: 由 stores
统一维护,在 stores/index.ts
中完成 pinia
的初始化,交付 main.ts
使用; 代码展示: 目标文件:src/stores/index.ts
;import { createPinia } from 'pinia';import persist from 'pinia-plugin-persistedstate';const pinia = createPinia();pinia.use(persist);export default pinia;
目标文件:src/main.ts
;import { createApp } from 'vue';import pinia from '@/stores';import App from './App.vue';const app = createApp(App);app.use(pinia);app.mount('#app');
4.2、仓库(store
)统一导出
以往: 使用一个仓库 import { useUSerStore } from '@/stores/user.ts';
不同仓库路径不一致;在每次导入的时候,都需要使用不同的路径,不方便; 优化处理: 由 stores/index.ts
统一导出,导入路径统一 @/stores
,而且仓库维护在 src/stores/modules
中; 代码展示: 在 src/modules
下面有两个模块 user、cart
这两个;目标文件:src/stores/index.ts
;import { createPinia } from 'pinia';import persist from 'pinia-plugin-persistedstate';const pinia = createPinia();pinia.use(persist);export default pinia;// import { useUserStore } from './modules/user';// import { useCartStore } from './modules/cart';// export { useUserStore, useCartStore };// 对上面的代码进行简化处理// 将 user 模块中的所有的按需导出 在当前文件中进行按需导出export * from './modules/user';export * from './modules/cart';
在别的文件使用的时候,直接使用 import { xxx } from '@/store';
进行导入即可; 阅读本书更多章节>>>>
本文链接:https://www.kjpai.cn/gushi/2024-04-22/161102.html,文章来源:网络cs,作者:利杜鹃,版权归作者所有,如需转载请注明来源和作者,否则将追究法律责任!
版权声明:本文内容由互联网用户自发贡献,该文观点仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容,一经查实,本站将立刻删除。
上一篇:【保姆级教程】Windows安装CUDA及cuDNN
下一篇:返回列表