vue常见问题处理 -- 页面刷新时，如何保持原有vuex中的state信息

一、页面刷新时，如何保持原有vuex中的state信息

　　页面刷新后，原有的 vuex 中的 state 会发生改变，如果在页面刷新之前，可以将 state 信息保存，页面重新加载时，再将该值赋给 state，那么该问题即可解决。

1、localstorage

　　可以使用 localstorage 来保存信息。

【在某组件中添加如下钩子函数。比如 app.vue中】
created() {
    //在页面加载时读取localstorage里的状态信息
    if (localstorage.getitem("store") ) {
        this.$store.replacestate(object.assign({}, this.$store.state,json.parse(localstorage.getitem("store"))))
    }

    //在页面刷新时将vuex里的信息保存到localstorage里
    window.addeventlistener("beforeunload",()=>{
        localstorage.setitem("store",json.stringify(this.$store.state))
    })
}


注：
    this.$store.replacestate()  用于替换 store 的信息（状态合并）。
    object.assign(target, ...source)  将source的值 赋给 target，若有重复的数据，则覆盖。其中...表示可以多个source。
    json.stringify()  用于将对象转为 json
    json.parse()   用于将 json 转为对象

注意：
　　若有两个组件，当调用 localstorage 的值，可能会出现问题。
　　如下图，main.vue 中 每次刷新页面会 触发 localstorage 操作。
　　开始 localstorage 中没值，某用户通过 login.vue 组件 进入 main.vue 组件并刷新页面后，localstorage 会记录当前用户相关的 state 信息。
　　直接在浏览器中切换路径到login.vue。当另外一个用户通过 login.vue 并进入 main.vue 时，此时获取的就是上一个用户的信息，这样肯定会出问题（我遇到的一个坑，大致意思就是这样）。

 

 

一个暴力的解决思路，在login.vue中 直接将上一个用户缓存的信息给删除。
此时 localstorage 没有了上个用户的信息。
【login.vue】
created() {
    // 进入画面前，移除主页面保存的 state 信息
    localstorage.removeitem("store")
}

然后只在main组件刷新时 使用 localstorage 记录信息。
【main.vue】
created() {
    //在页面加载时读取localstorage里的状态信息
    if (localstorage.getitem("store") ) {
        this.$store.replacestate(object.assign({}, this.$store.state,json.parse(localstorage.getitem("store"))))
    }

    //在页面刷新时将vuex里的信息保存到localstorage里
    window.addeventlistener("beforeunload",()=>{
        localstorage.setitem("store",json.stringify(this.$store.state))
    })
}

 

2、sessionstorage

　　也可以使用 sessionstorage 来保存信息。

【在某组件中添加如下钩子函数。比如 app.vue中】
created() {
    //在页面加载时读取sessionstorage里的状态信息
    if (sessionstorage.getitem("store") ) {
        this.$store.replacestate(object.assign({}, this.$store.state,json.parse(sessionstorage.getitem("store"))))
    }

    //在页面刷新时将vuex里的信息保存到sessionstorage里
    window.addeventlistener("beforeunload",()=>{
        sessionstorage.setitem("store",json.stringify(this.$store.state))
    })
}

 

3、localstorage 与 sessionstorage 的区别

（1）localstorage 与 sessionstorage 都是客户端用于存储数据的。
（2）localstorage是没有失效时间的，sessionstorage的声明周期是浏览器的生命周期。
（3）当浏览器关闭时，sessionstorage的数据将清空，而localstorage数据只要不通过代码特意的删除或手动删除，是永久保存的。
（4）若想清除localstorage 的数据。

localstorage.removeitem(key)       清除一条数据
localstorage.clear()               清除全部的数据