Vue3项目框架搭建封装，一次学习，终身受益【万字长文，满满干货】（三）

let hasSessionStorage = true
let hasLocalStorage = true
//判断当前浏览器是否支持sessionStorage
if (sessionStorage) {
  try {
    sessionStorage.setItem('_sessionStorageTest', 'Hello World!')
    sessionStorage.removeItem('_sessionStorageTest')
  } catch (e) {
    hasSessionStorage = false
  }
} else {
  hasSessionStorage = false
}
//判断当前浏览器是否支持localStorage
if (localStorage) {
  try {
    localStorage.setItem('_localStorageTest', 'Hello World!')
    localStorage.removeItem('_localStorageTest')
  } catch (e) {
    hasLocalStorage = false
  }
} else {
  hasLocalStorage = false
}
/**
 * 设置本地缓存
 * @param key
 * @param val
 */
export function setLocalStorage(key: string, val?: any): void {
  if (!hasLocalStorage) {
    return
  }
  localStorage.setItem(key, JSON.stringify(val))
}
/**
 * 设置会话级别缓存
 * @param key
 * @param val
 */
export function setSessionStorage(key: string, val: any): void {
  if (!hasSessionStorage) {
    return
  }
  sessionStorage.setItem(key, JSON.stringify(val))
}

const getStorageTypeMap: AnyObj = {
  sessionStorage: getSessionStorage,
  localStorage: getLocalStorage
}
const setStorageTypeMap: AnyObj = {
  sessionStorage: setSessionStorage,
  localStorage: setLocalStorage
}
const plugin = (options: Options): any => {
  // key 为标识前缀，避免命名空间冲突
  const { key, storeList } = options
  return (context: PiniaPluginContext) => {
    const { store } = context
    let storageType:any
    let obj: any = {}
    for (const item of storeList) {
      if (item.storeName.includes(store.$id)) {
         // storeName 为哪个store，path 为store下某个字段
        const { storeName, path } = item
        storageType = item.storageType
        // 如果key 不存在默认走 pinia
        const data = getStorageTypeMap[storageType](`${key ?? 'pinia'}-${store.$id}`)
        if (data) {
          // 更新store
          store.$patch(data)
        }
        if (path && path.length > 0) {
          // 如果存在path 则需要判断
          if (storeName.length === 1) {
            path.forEach((item) => {
              obj[item] = store.$state[item]
            })
          } else {
            return new Error('配置path 时只允许配置一个storeName')
          }
        }
        obj = path && path.length > 0 ? obj : store.$state
        storeName.includes(store.$id) &&
        store.$subscribe(() => {
          setStorageTypeMap[storageType](`${key ?? 'pinia'}-${store.$id}`, toRaw(obj))
        })
      }
    }
  }
}

// piniaStore.js
import { defineStore } from 'pinia'
export const main = defineStore('main', {
  state: () => {
    return {
      test: 'hello word',
      test1: 'hello word1',
      configInfo: {}
    }
  },
  getters: {},
  actions: {}
})
export const test = defineStore('test', {
  state: () => {
    return {
      age: 18,
      name: 'yz'
    }
  }
})
export const test1 = defineStore('test1', {
  state: () => {
    return {
      age: 18,
      name: 'yz'
    }
  }
})

import { createPinia } from 'pinia'
import piniaPlugin from '@/common/utils/piniaPlugin'
// 创建pinia 实例
const pinia = createPinia()
pinia.use(
  piniaPlugin({
    key: 'XXX', // 这是给缓存到本地时，加一个特殊的前缀，以免造成污染到其他缓存数据
    storeList: [
      {
        storeName: ['main'], // 对于特定store进行持久化，空或者不传，则对所有的store进行缓存到本地
        storageType: 'sessionStorage',
        path: ['configInfo']
      },
      {
        storeName: ['test'], // 对于特定store进行持久化，空或者不传，则对所有的store进行缓存到本地
        storageType: 'sessionStorage'
      },
      {
        storeName: ['test1'], // 对于特定store进行持久化，空或者不传，则对所有的store进行缓存到本地
        storageType: 'localStorage'
      }
    ]
  })
)

export const useUserStore = defineStore('storeUser', {
  state () {
    return {
      firstName: 'S',
      lastName: 'L',
      accessToken: 'xxxxxxxxxxxxx',
    }
  },
  // 插件配置  
  persist: {
    enabled: true,
    strategies: [
      {
        key: 'user',  //自定义 Key值
        storage: localStorage,  // 选择存储方式
      },
    ],
  },
})