[ Ref ] 共用 localStorage service

劉鈞霖

2021-12-15 8920cf32b364d6018da3a866e24e8d39e3b86087

[ Ref ] 共用 localStorage service

 PAMapp/assets/ts/api/share.ts

@@ -54,7 +54,7 @@
  if (!_.includes(notRequireInterceptorErrorUrl, error.config.url)) {
    switch (error.response.status) {
      case 401:
        Promise.all([ErrorMessageBox('登入逾時'), window.$nuxt.$store.dispatch('localStorage/actionStorageClear')]).then(() => {
        Promise.all([ErrorMessageBox('登入逾時'),window.$nuxt.$store.dispatch('localStorage.service/clearStorage')]).then(()=>{
          _.isEqual(window.$nuxt.$route.name, 'index') ? location.reload() : window.$nuxt.$router.push('/');
        });
        break;

 PAMapp/store/localStorage.service.ts

¤ñ¹ï·sÀÉ®×
@@ -0,0 +1,109 @@
import { Module, VuexModule, Mutation, Action } from 'vuex-module-decorators';
import _ from 'lodash';


export enum LocalStorageItem {
  ID_TOKEN                  = "id_token",
  CURRENT_ROLE              = "current_role",
  CONSULTANT_ID             = "consultant_id",
  USER_INFO                 = "user_info",
  QUICK_FILTER              = "quick_filter",
  RECOMMEND_CONSULTANT_ITEM = "recommend_consultant_item",
  MY_REQUESTS               = "my_requests",
  FAVORITE_CONSULTANT       = "favorite_consultant",
}

export type storageDataDto = Record<LocalStorageItem, any>

export const initialValueOfStorageItemDto = {
  [LocalStorageItem.ID_TOKEN]                 : String,
  [LocalStorageItem.CURRENT_ROLE]             : String,
  [LocalStorageItem.CONSULTANT_ID]            : String,
  [LocalStorageItem.RECOMMEND_CONSULTANT_ITEM]: String,
  [LocalStorageItem.USER_INFO]                : Object,
  [LocalStorageItem.MY_REQUESTS]              : Object,
  [LocalStorageItem.FAVORITE_CONSULTANT]      : Object,
  [LocalStorageItem.QUICK_FILTER]             : Array,
}

@Module
export default class commonLocalStorage extends VuexModule {
  localStorageDto = this.getInitLocalStorageDto();
   //** åˆå§‹ç‰©ä»¶ç‹€æ…‹ **//
  private getInitLocalStorageDto(): storageDataDto {
    const initLocalStorageDto = {} as storageDataDto;
    _.forEach( LocalStorageItem , keyName =>
      initLocalStorageDto[keyName] = this.processOfStorageGetItem(keyName)
    )
    return initLocalStorageDto;
  }
  //** å–å¾— localStorage資料 **/
  private processOfStorageGetItem( keyName:string ): any {
    const storageData = localStorage.getItem(keyName);
    const itemType = initialValueOfStorageItemDto[keyName];
    const prepareData = storageData
                          ? _.isEqual(itemType,String)
                            ? storageData
                            : JSON.parse(storageData)
                          : null;
    return prepareData
  }

  ///////////////////////////////////////////////// Mutation

  /** å„²å­˜é€² localStorageDto **/
  @Mutation setLocalStorageDto( setItem:SetItemDto ): void {
    this.localStorageDto[setItem.keyName] = setItem.value ;
  }

  //** ç§»é™¤å–®ä¸€ **//
  @Mutation clearStoreByKeyName( keyName:string ): void {
    localStorage.removeItem(keyName)
    this.localStorageDto[keyName]=null;
  }

  //** ç§»é™¤å…¨éƒ¨ç‰©ä»¶ **//
  @Mutation clearStoreData(): void {
      _.keys(this.localStorageDto)
      .forEach(keyName => {
        localStorage.removeItem(keyName);
        this.localStorageDto[keyName]=null;
      });
  }

  ///////////////////////////////////////////////// Action

  //** ç‰©ä»¶å„²å­˜ **//
  @Action storeData( data: storageDataDto ): void {
    _.keys(data).forEach(keyName=>{
      const newObj = {
        keyName:keyName,
        value:data[keyName]
      }
      this.context.dispatch('localStorageSet',newObj);
    });
  }

  //** å°‡éœ€è¦ å­˜é€² localStorage æ ¼å¼ **//
  @Action localStorageSet( setItem:SetItemDto ): void {
    const itemType = initialValueOfStorageItemDto[setItem.keyName];
    const prepareData = _.isEqual(itemType,String)
                          ? setItem.value
                          : JSON.stringify(setItem.value);
    localStorage.setItem(setItem.keyName,prepareData);

    this.context.commit('setLocalStorageDto',setItem)
  }

  //** å…¨éƒ¨ç§»é™¤ **//
  @Action clearStorage(keyName?:string): Promise<boolean> {
    return new Promise((resolve, reject) => {
      keyName ? this.context.commit('clearStoreByKeyName',keyName) : this.context.commit('clearStoreData');
      resolve(true)
    });
  }
}
export interface SetItemDto{
  keyName:string,
  value:any,
}