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

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

vueuse中useLocalStorage对本地存储(localStorage)做了进一步封装，使其变为响应式，并且在保存数据时也不再限制数据只能是string，还有就是可以自定义序列化等各种功能。更多功能及使用方式请查看官网地址

核心代码

// hooks/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 中定义好具体的类型，而无需重复的去写重载函数，实用性及可维护性都得到了不小的提高~~

使用

import { useLocalCache } from 'hooks'

const { getCache, setCacke, removeCache }  = useLocalCache();
// 获取
const token = getCache('token');
// 赋值
setCacke('userInfo', { usename: 'admin', password: 'admin1234' })
// 清除
removeCache('token')

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

项目在线地址github