【金秋打卡】第16天 本地缓存

2022/11/9 4:24:10

本文主要是介绍【金秋打卡】第16天 本地缓存,对大家解决编程问题具有一定的参考价值,需要的程序猿们随着小编来一起学习吧!

课程名称:基于Vue3最新标准,实现后台前端综合解


课程章节: 第一章


课程讲师:Sunday


课程内容:

    

    在项目开发过程中 我们获取到token后 会把token 进行缓存 而缓存的方式有两种

  1.  本地缓存:LocalStorage

  2.  全局状态管理:Vuex


保存在 LocalStorage 是为了方便实现 自动登录功能


保存在 vuex 中是为了后面在其他位置进行使用


那么下面我们就分别来实现对应的缓存方案:


新建 storage.js 文件 封装

/**
 * 存储数据
 */
 export const setItem = (key, value) => {
  // 将数组、对象类型的数据转化为 JSON 字符串进行存储
  if (typeof value === 'object') {
    value = JSON.stringify(value)
  }
  window.localStorage.setItem(key, value)}
 /**
 * 获取数据
 */
 export const getItem = key => {
  const data = window.localStorage.getItem(key)
  try {
    return JSON.parse(data)
  } catch (err) {
    return data  
  }
}
/**
 * 删除数据
 */
 export const removeItem = key => {
  window.localStorage.removeItem(key)
 }
 /**
 * 删除所有数据
 */
 export const removeAllItem = key => {
  window.localStorage.clear()
  }

在 vuex 的 user 模块下,处理 token 的保存

import { login } from '@/api/sys'import md5 from 'md5'
import { setItem, getItem } from '@/utils/storage'
import { TOKEN } from '@/constant'
export default {
  namespaced: true,
  state: () => ({
    token: getItem(TOKEN) || ''
  }),
  mutations: {
    setToken(state, token) {
      state.token = token
      setItem(TOKEN, token)
    }
  },
  actions: {
    login(context, userInfo) {
      ...
          .then(data => {
            this.commit('user/setToken', data.data.data.token)
            resolve()
          })
          ...
      })
    }
  }}






https://img1.sycdn.imooc.com/63699fd500015f9f11300721.jpg









这篇关于【金秋打卡】第16天 本地缓存的文章就介绍到这儿,希望我们推荐的文章对大家有所帮助,也希望大家多多支持为之网!


扫一扫关注最新编程教程