decorate/src/views/system/shared/cache.ts

import { onActivated, ref } from 'vue'
import type { LoginState } from '@/api'

const cacheKey = '__loginState__'

export const useCacheState = () => {
  const getInitial = () => {
    return import.meta.env.DEV
      ? { phone: '13138102395', password: 'Aa111111', remember: true }
      : { phone: '', password: '', remember: false }
  }
  const state = ref<LoginState & { remember: boolean }>(getInitial())
  const updateCacheState = () => {
    try {
      const stateStr = localStorage.getItem(cacheKey)
      if (stateStr) {
        const value = JSON.parse(stateStr)
        if (value.remember) {
          state.value = value
        } else {
          state.value = getInitial()
        }
      } else {
        state.value = getInitial()
      }
      console.error(state.value)
    } catch {}
  }
  updateCacheState()
  onActivated(updateCacheState)

  return [
    state,
    () => {
      if (state.value.remember) {
        localStorage.setItem(cacheKey, JSON.stringify(state.value))
      } else {
        localStorage.removeItem(cacheKey)
      }
    }
  ] as const
}