vue3 typescript 封装storage

store 目录如下

1651221392(1).png

user.ts

// userStroe
import {storage} from '@/utils'
import { Module } from 'vuex';
export interface UserState {
  userInfo?:string|object |null, // 用户信息
  menus?:string|object|Array<any>|null, // 系统菜单
  roles?:string|object|Array<any>|null, // 角色
  permissions:any[], // 权限
  token?:string|null, // token
}
const user:Module<UserState,any>={
  state: () => ({ 
    userInfo:storage.getStore('userInfo'), // 用户信息
    menus:storage.getStore('menus'), // 系统菜单
    roles:storage.getStore('roles'), // 角色
    permissions:[], // 权限
    token:storage.getStore('token'), // token
   }),
  mutations: { 
    SET_USERINFO:(state,info)=>{ // 用户信息
      state.userInfo = info
      storage.setStore('userInfo',info)
    },
    DEL_USERINFO:(state)=>{ // 删除用户信息
      state.userInfo = null
      storage.delStore('userInfo')
    },
    SET_MENUS:(state,menus)=>{ // 系统菜单
      state.menus = menus
      storage.setStore('menus',menus)
    },
    DEL_MENUS:(state)=>{ // 删除系统菜单
      state.menus = null
      storage.delStore('menus')
    },
    
    SET_ROLES:(state,roles)=>{ // 用户角色
      state.roles = roles
      storage.setStore('roles',roles)
    },
    DEL_ROLES:(state)=>{ // 删除用户角色
      state.roles = null
      storage.delStore('roles')
    },
    SET_PERMS:(state,perms)=>{ // 用户权限
      state.permissions = perms
      storage.setStore('permissions',perms)
    },
    DEL_PERMS:(state)=>{ // 删除用户权限
      state.permissions = []
      storage.delStore('permissions')
    },
    SET_TOKEN:(state,token)=>{ // 系统token
      state.token = token
      storage.setStore('permissions',token)
    },
    DEL_TOKEN:(state)=>{ // 删除系统token
      state.token = null
      storage.delStore('token')
    }
  },
  actions: { 
    setUserInfo({ commit }, userInfo){
      commit('SET_USERINFO',userInfo)
    },
    setRoles({ commit }, roles){
      commit('SET_ROLES',roles)
    },
    setPerms({ commit }, perms){
      commit('SET_PERMS',perms)
    },
    setToken({ commit }, token){
      commit('SET_TOKEN',token)
    },
    clearAllStore({commit}){
      commit('DEL_USERINFO')
      commit('DEL_ROLES')
      commit('DEL_PERMS')
      commit('DEL_TOKEN')
    }
  },
  getters: { 
    
  }
}
export default user

index.ts

// index.ts
import { createStore } from 'vuex'
import user from './modules/user'
export default createStore({
  state: {
  },
  mutations: {
  },
  actions: {
  },
  modules: {
    user
  }
})

添加本地缓存

// storage.ts
const writeTime =new Date().getTime()
const myStorage={
 
  setStore:(key:string,value:any,expire:number=7)=>{
    const obj  = {
      key,
      value,
      writeTime,
      expire
    }
    localStorage.setItem(key,JSON.stringify(value))
  },
  getStore:(key:string)=>{
    let val = localStorage.getItem(key)
    if(val === null || typeof val === 'undefined'){
      return null
    }
    const res = JSON.parse(val)
    const readTime = new Date().getTime();
    if((readTime - res.writeTime)/1000*60*60*24 > res.expired){
      // 数据过期 清除数据
      localStorage.removeItem(key);
      return null
    }else{
      // console.log(readTime - res.writeTime)
      return res.value
    }
  },
  delStore:(key:string)=>{ 
    if(key){
      localStorage.clearItem(key)
    }
  }
}
export default myStorage