vuex状态刷新后丢失问题兼容IOS

这个是参考多个网上的资料，然后自己整理，希望能帮到各位

 

App.vue:

created() {
        //在页面加载时读取缓存里的状态信息
        if (localStorage.getItem("users")) {
            this.$store.replaceState(Object.assign({}, this.$store.state, JSON.parse(localStorage.getItem("users"))))
        }

        var isiOS = !!navigator.userAgent.match(/\(i[^;]+;( U;)? CPU.+Mac OS X/); //ios终端
        if (isiOS) {
            //在页面刷新时将vuex里的信息保存到缓存里
            window.addEventListener("pagehide", () => {
                localStorage.setItem("users", JSON.stringify(this.$store.state))
            })
        } else {
            //在页面刷新时将vuex里的信息保存到缓存里
            window.addEventListener("beforeunload", () => {
                localStorage.setItem("users", JSON.stringify(this.$store.state))
            })
        }
    },

效果：

Ps:

1、Object.assign()，这个是用于对象的合并

2、Object.assign({}, object, object)，第一个是对象是目标对象，如果对象中有重复的字段存在那么后面的会覆盖前面的字段，以此类推；

const target = { a: 1, b: 1 };

const source1 = { b: 2, c: 2 };
const source2 = { c: 3 };

Object.assign(target, source1, source2);
target // {a:1, b:2, c:3}

3、第一个对象设置成 " {} ",是纯粹为了让后面几个源对象合并

Object.assign()参考资料：https://www.baidu.com/link?url=pPMCQffQKnFwCzuNf3Z4sYAubHt61KJk6_5cgugDMKzI9izz_CQo4BUKHKnR-zoU&wd=&eqid=af432f55000aad8e000000065e97bb63