第一次寫(xiě)文章，也當(dāng)作工作中遇到問(wèn)題的一次分享。

由于Vuex在瀏覽器刷新是會(huì)丟失數(shù)據(jù)，所以我在項(xiàng)目里使用了Vuex持久化存儲(chǔ)的功能，我這邊實(shí)現(xiàn)的方案是監(jiān)聽(tīng)頁(yè)面刷新的事件，將Vuex中的數(shù)據(jù)存到sessionStorage中，在頁(yè)面初始化的時(shí)候再將sessionStorage中的數(shù)據(jù)設(shè)進(jìn)Vuex中，具體代碼如下

create(){
      //在頁(yè)面加載時(shí)讀取sessionStorage里的狀態(tài)信息
    if (sessionStorage.getItem("store")) {
      this.$store.replaceState(
        Object.assign(
          {},
          this.$store.state,
          JSON.parse(sessionStorage.getItem("store"))
        )
      );
       sessionStorage.removeItem("store");
    }

    //在頁(yè)面刷新時(shí)將vuex里的信息保存到sessionStorage里
    window.addEventListener("beforeunload", () => {
      sessionStorage.setItem("store", JSON.stringify(this.$store.state));
    });
}

這樣一個(gè)簡(jiǎn)單的Vuex持久化儲(chǔ)存的功能就實(shí)現(xiàn)了，瀏覽器刷新后我們也能讀取到Vuex中儲(chǔ)存的數(shù)據(jù)，但是突然有一天，這個(gè)功能失效了，頁(yè)面也沒(méi)有報(bào)錯(cuò)，經(jīng)過(guò)我的一番摸索，最終將問(wèn)題鎖定在了Vuex中儲(chǔ)存的$route對(duì)象上

$Route路由對(duì)象屬性

$Route對(duì)象上有以下這幾個(gè)屬性

• path：字符串，對(duì)應(yīng)當(dāng)前路由的路徑，總是解析為絕對(duì)路徑，如 "/foo/bar"
• params：一個(gè) key/value 對(duì)象，包含了動(dòng)態(tài)片段和全匹配片段，如果沒(méi)有路由參數(shù)，就是一個(gè)空對(duì)象
• query：一個(gè) key/value 對(duì)象，表示 URL 查詢參數(shù)。例如，對(duì)于路徑 /foo?user=1，則有 $route.query.user == 1，如果沒(méi)有查詢參數(shù)，則是個(gè)空對(duì)象
• hash：當(dāng)前路由的 hash 值 (帶 #) ，如果沒(méi)有 hash 值，則為空字符串
• fullPath：完成解析后的 URL，包含查詢參數(shù)和 hash 的完整路徑
• matched：一個(gè)數(shù)組，包含當(dāng)前路由的所有嵌套路徑片段的路由記錄 。路由記錄就是 routes 配置數(shù)組中的對(duì)象副本 (還有在 children 數(shù)組)

問(wèn)題就出在了$route這個(gè)路由對(duì)象上，我們?cè)陧?yè)面刷新時(shí)要將Vuex中的數(shù)據(jù)轉(zhuǎn)換成字符串，再進(jìn)行儲(chǔ)存

    //在頁(yè)面刷新時(shí)將vuex里的信息保存到sessionStorage里
    window.addEventListener("beforeunload", () => {
      sessionStorage.setItem("store", JSON.stringify(this.$store.state));
    });

而store中如果有$route就會(huì)報(bào)錯(cuò)，這是因?yàn)?code>$route包含了一些非序列話的屬性，例如函數(shù)、循環(huán)引用等；
當(dāng)使用JSON.stringify($route)時(shí)，可能會(huì)報(bào)錯(cuò)TypeError: Converting circular structure to JSON，這是因?yàn)?code>$route對(duì)象包含循環(huán)引用，即對(duì)象內(nèi)部存在相互引用，導(dǎo)致JSON.stringify()無(wú)法序列化這個(gè)對(duì)象，從而拋出這個(gè)錯(cuò)誤。

解決方法

為了解決這個(gè)問(wèn)題，你可以將$route對(duì)象轉(zhuǎn)換成一個(gè)新的純JavaScript對(duì)象，然后再進(jìn)行序列化?？梢允褂?code>Object.assign()方法來(lái)實(shí)現(xiàn)這一點(diǎn)，如下所示：

JSON.stringify(Object.assign({}, $route))

這個(gè)方法會(huì)創(chuàng)建一個(gè)新的JavaScript對(duì)象，將$route的屬性復(fù)制到這個(gè)新對(duì)象中，并返回這個(gè)新對(duì)象。由于這個(gè)新對(duì)象只包含純JavaScript數(shù)據(jù)，因此可以安全地序列化它。

到此這篇關(guān)于記一次Vue中$route序列號(hào)報(bào)錯(cuò)的文章就介紹到這了,更多相關(guān)Vue $route序列號(hào)報(bào)錯(cuò)內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！

最新評(píng)論