黑马程序员技术交流社区

标题: 【南京校区】页面刷新,Vuex数据丢失的解决方案 [打印本页]

作者: 大蓝鲸小蟀锅    时间: 2020-3-10 20:00
标题: 【南京校区】页面刷新,Vuex数据丢失的解决方案
本帖最后由 大蓝鲸小蟀锅 于 2020-3-11 21:17 编辑

由于Vuex的数据是存储在内存中的,相当于memory cache,当页面刷新的时候内存被清空重载新内容,原来的数据就丢了,为了解决这个我们可以借助浏览器的本地存储来解决,此时我们有两个选择
相比之下localStorage太持久了,不主动清除都会一直在,而sessionStorage更符合Vuex会话期状态管理的设计初衷。因此下文中统一使用sessionStorage来做补充,解决问题。
有了补充对象之后,我们要做的只有两点
1、每次在mutation中set state的时候,同步的塞到sessionStorage一份
2、状态初始化的时候,从sessionStorage中读取相应内容并作为默认值(存在的话)
看起来很简单,于是第一版方案有了
[JavaScript] 纯文本查看 复制代码
export default new Vuex.Store({
    state: {
        userLevel: sessionStorage.getItem('userLevel') || ''
    },
    mutations: {
        SET_USERLEVEL(state, userLevel) {
            sessionStorage.setItem('userLevel', userLevel)
            state.userLevel = userLevel
        }
    },
    modules: {
    }
})
这个是解决问题了,但是每个mutation都要sessionStorage.setItem一下实在有点麻烦,而且初始化还要都getItem一遍,于是我们改进了第二版
[AppleScript] 纯文本查看 复制代码
const storeMaker = (state) => {
    // 初始化
    Object.keys(state).map((key) => {
        // 判断类型获取本地存储数据
        if (typeof state[key] === 'object') {
            if (sessionStorage.getItem(key) && JSON.parse(sessionStorage.getItem(key))) {
                state[key] = JSON.parse(sessionStorage.getItem(key))
            }
        } else if (typeof state[key] === 'number') {
            if (sessionStorage.getItem(key) && parseInt(sessionStorage.getItem(key))) {
                state[key] = parseInt(sessionStorage.getItem(key))
            }
        } else {
            if (sessionStorage.getItem(key)) {
                state[key] = sessionStorage.getItem(key)
            }
        }
    })

    // 重写set处理
    return new Proxy(state, {
        set: function(target, key, value) {
            let temp = value
            if (typeof temp === 'object') {
                temp = JSON.stringify(temp)
            }

            sessionStorage.setItem(key, temp)
            return Reflect.set(target, key, value)
        }
    })
}

export default new Vuex.Store({
    state: storeMaker({
        userLevel: ''
    }),
    mutations: {
        SET_USERLEVEL(state, userLevel) {
            state.userLevel = userLevel
        }
    },
    modules: {
    }
})
内容不多,主要定义了一个storeMaker的函数实现了两个功能
1、对传入的state初始值判断类型,并尝试从sessionStorage中读取数据替换默认值
2、通过Proxy重置state的set逻辑,添加同步保存到sessionStorage的逻辑
其实本来可以通过Proxy重置get逻辑处理取值的问题,但是由于vuex本身通过defineProperty函数重置了get逻辑,在这里使用proxy覆盖会有冲突,因此在初始化的时候直接读取sessionStorage。
同时也存在一些问题:
1、目前只处理了一级属性,二级以下属性没处理,对于初始化会有偏差。对于这点处理层级也不宜过深,因为过深的结构设计本来就并不合理,两层基本也足够了。基本处理就是对于state的每个key再去遍历一遍,如果是object(非null非数组非空对象)就重新proxy一下
2、可以尝试打包成npm包,或者写成Vuex的插件形式,方便使用
3、等等
大家有兴趣一起来讨论
联想到的一些点:
1、memory cache和disk cache?内存怎么清理?js垃圾回收机制?
2、SessionStorage怎么做到会话期缓存?
3、session机制怎么回事?
4、http的无状态?状态保持?客户端保持?服务端保持?
5、等等等等
发散开看看,一个地方真的能学到很多东西。







欢迎光临 黑马程序员技术交流社区 (http://bbs.itheima.com/) 黑马程序员IT技术论坛 X3.2