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

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

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

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

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

$Route路由對象屬性

$Route對象上有以下這幾個屬性

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

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

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

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

解決方法

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

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

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

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

最新評論