这是我参与11月更文挑战的第11天，活动详情查看：2021最后一次更文挑战

在我们开发项目时，多个页面之间经常需要将数据存缓存，在需要的时候获取。这样就会出现多个页面都有存取缓存的地方，不仅代码比较冗余也不便于管理。为了提高代码的可维护性，可以在vue项目统一设置缓存方式，封装localStorage定时缓存cache.js，同时借助Vuex状态管理来统一存储缓存数据。使得代码更简洁优雅，一目了然。

graph TD
Vue项目 --> Vuex--> cache.js--> 获取缓存
cache.js--> 设置缓存

1、vue组件获取和设置缓存

// 在计算里通过助手函数获取
computed: {
    ...mapState({
        userToken: state => state.user.userToken,
    }),
},

// 在方法里通过助手函数调取方法
methods: {
    ...mapMutations([
        'setUserToken',
    ]),
}

2、Vuex设置缓存方式

import {
    MyLocalStorage,
} from '../../utils/cache.js'

export default {
    state: {
        userToken: MyLocalStorage.Cache.get('USER_TOKEN') || '',   // 获取用户token
        userInfo: MyLocalStorage.Cache.get('USER_INFO') || '', // 获取用户信息
    },

    mutations: {
        // 提交用户token
        setUserToken(state, token) {
            state.userToken = token;
            MyLocalStorage.Cache.put('USER_TOKEN', token, 1 * 24 * 60 * 60);  // 设置用户token
        },

        // 提交用户信息
        setUserInfo(state, userInfo) {
            state.userInfo = userInfo;
            MyLocalStorage.Cache.put('USER_INFO', userInfo, 1 * 24 * 60 * 60);  // 设置用户信息
        },
    },

    actions: {
        // 用户登录
    }
}

3、cache.js代码封装

// localStorage  扩展定时缓存
export const MyLocalStorage = {
    Cache: {
        // 加入缓存
        put: function (key, stringVal, time) {
            try {
                if (!localStorage) {
                    return false;
                }
                if (!time || isNaN(time)) {
                    time = 60;
                }
                var cacheExpireDate = (new Date() - 1) + time * 1000;
                var cacheVal = { 
                    val: stringVal, 
                    exp: cacheExpireDate 
                }
                localStorage.setItem(key, JSON.stringify(cacheVal)); // 存入缓存值
            } catch (e) {
                return null;
            }
        },

        // 获取缓存
        get: function (key) {
            try {
                if (!localStorage) { 
                    return false; 
                }
                var cacheVal = localStorage.getItem(key);
                var result = JSON.parse(cacheVal);
                var now = new Date() - 1;
                if (!result) { 
                    return null; // 缓存不存在 
                }
                if (now > result.exp) { 
                    // 缓存过期
                    this.remove(key);
                    return '';
                }
                return result.val;
            } catch (e) {
                this.remove(key);
                return null;
            }
        },
        // 移除缓存，一般情况不手动调用，缓存过期自动调用
        remove: function (key) {
            if (!localStorage) { 
                return false;
            }
            localStorage.removeItem(key);
        },
        // 清空所有缓存
        clear: function () {
            if (!localStorage) { 
                return false;
            }
            localStorage.clear();
        }
    }
}

这就是统一管理缓存啦。统一都使用localStorage定时方式设置缓存,全局维护，不会出现每个页面都在单独的存取缓存。记录一下。温故而知新！