1.vueuse-useLocalStorage在项目中的使用

派大星氵

已于 2023-07-28 10:28:00 修改

阅读量2.7k

点赞数 2

分类专栏： vueuse 文章标签： vue typescript 前端

于 2023-04-10 14:56:10 首次发布

本文链接：https://blog.csdn.net/weixin_42386379/article/details/130059649

版权

vueuse 专栏收录该内容

7 篇文章 1 订阅

订阅专栏

有了ts之后，传统的localStore在项目中(特别是多人协作项目时)使用起来就没那么顺手了，例如localStore的key及其参数类型的统一等等，当然同样可以使用ts来进行约束，不过对保存值的处理就会显得繁琐些。基于此就有了此篇文章的内容。

import { useLocalStorage } from '@vueuse/core';
import { ILocalCache, Keys, TGetCache, TUserInfo } from './type';

const defCache: ILocalCache = {
  token: '',
  userInfo: { username: '', avatar: '' },
};

export function useLocalCache() {
  // 1.获取cache
  function getCache(key: 'token'): string;
  function getCache(key: 'userInfo'): TUserInfo;
  function getCache(key: Keys): TGetCache {
    return useLocalStorage(key, defCache[key]).value;
  }
  // 2.设置cache
  function setCache(key: 'token', value: string): void;
  function setCache(key: 'userInfo', value: TUserInfo): void;
  function setCache(key: Keys, value: any) {
    useLocalStorage(key, defCache[key]).value = value;
  }
  // 3.移除cache
  function removeCache(key: Keys) {
    useLocalStorage(key, defCache[key]).value = null;
  }
  // 4.清除所有cache
  function clearCache() {
    localStorage.clear();
  }
  return { getCache, setCache, removeCache, clearCache };
}

上述代码中getCache及setCache方法用到ts的函数重载，不清楚的小伙伴可以去了解下，都是比较基础的ts用法。变量的类型封装在type.ts文件里面了，内容如下:

// { a:V; b:P } ---> a | b
type ObjToUnion<T> = {
  [P in keyof T]: P;
}[keyof T];

export interface ILocalCache {
  token: string;
  userInfo: { username: string; avatar: string }; // 用户信息
}
export type Keys = ObjToUnion<ILocalCache>;

export type TUserInfo = Pick<ILocalCache, 'userInfo'>['userInfo'];

export type TGetCache = string| TUserInfo;

最后。对useLocalStorage在项目中的使用仅个人见解，有更好使用方式的欢迎评论探讨~

2023-7-28 更新

getCache及setCache参数及返回值类型的定义使用函数重载还是过于麻烦了，特别是每次在新增key的时候都需要再定义一次；最近在思考能否更简单易用一些，有个一劳永逸的方法，只需要定义key的类型就行，突然想到这不就是泛型的作用吗… 由此便有了这次更新。

// useLocalCache.ts
import { useLocalStorage } from '@vueuse/core';

const defCache= {
  token: '',
  userInfo: { username: '', avatar: '' },
  theme: 'default' as 'default' | 'custom'
};

type LocalCacheValueType = typeof defCache;
type Keys = keyof LocalCacheValueType;

export function useLocalCache() {
  // 1.获取cache
  function getCache<T extends Keys>(key: T): LocalCacheValueType [T] {
    return useLocalStorage(key, defCache[key]).value;
  }
  // 2.设置cache
  function setCache<T extends Keys>(key: T, value: LocalCacheValueType [T]) {
    useLocalStorage(key, defCache[key]).value = value;
  }
  // 3.移除cache
  function removeCache(key: Keys) {
    useLocalStorage(key, defCache[key]).value = null;
  }
  // 4.清除所有cache
  function clearCache() {
    localStorage.clear();
  }
  return { getCache, setCache, removeCache, clearCache };
}

如上所示在 getCache方法定义泛型 T 并且通过 T extends Keys 来约束传入的key，返回值通过LocalCacheValueType [T]来取出对应的类型。这样当新增key时，只需要在 defCache 中定义好具体的类型，而无需重复的去写重载函数，实用性及可维护行都得到了不小的提高~~