前言
-
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-persistedstate
yarn add pinia-plugin-persistedstate
npm 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.toymoban.com/news/detail-845780.html
文章来源:https://www.toymoban.com/news/detail-845780.html
到了这里,关于前端开发小技巧 - 【Vue3 + TS】 - 在 TS + Vue3 中使用 Pinia,实现 Pinia 的持久化,优化Pinia(仓库统一管理)的文章就介绍完了。如果您还想了解更多内容,请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持TOY模板网!