第一次发表文章，也作为工作上遇到困难的一次共享。
因为Vuex用浏览器更新会损失数据信息，所以我在新项目里采用了Vuex持久化存储的功效，我这里达到的策略是监视页面刷新事件，将Vuex中数据存进sessionStorage中，在网页页面复位的时候才将sessionStorage中数据设进Vuex中，详细编码如下所示
create(){
//在页面加载时载入sessionStorage中的配置信息
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分布式锁存放的作用就实现了，电脑浏览器更新后我们也可以载入到Vuex中存放的数据信息，可是突然有一天，这一功能失效了，网页页面都没有出错，通过我一番探索，最后将难题锁住到了Vuex中存放的$route目标上
$Route路由器对象属性
$Route目标上面有下面这好多个特性
- path：字符串数组，相匹配现阶段路由器的路线，一直分析为相对路径，如
"/foo/bar" - params：一个 key/value 目标，包括了动态性精彩片段及全配对精彩片段，要是没有路由器主要参数，就是一个空对象
- query：一个 key/value 目标，表明 URL 查询参数。比如，针对途径
/foo?user=1，亦有$route.query.user == 1，要是没有查询参数，乃是个空对象 - hash：现阶段路由器的 hash 值 (带
#) ，要是没有 hash 值，乃为空字符串 - fullPath：进行分析后 URL，包括查询参数和 hash 的一体化途径
- matched：一个二维数组，包括现阶段路由器中的所有嵌入途径精彩片段的路由器纪录。路由器纪录便是
routes配备二维数组里的目标团本 (同样在children二维数组)
情况就有到了$route这一路由器目标上，大家在页面刷新时要把Vuex中数据转换成字符串，然后再进行贮存
//在页面刷新时把vuex中的信息内容存储在sessionStorage里
window.addEventListener("beforeunload", () => {
sessionStorage.setItem("store", JSON.stringify(this.$store.state));
});
而store中若是有$route便会出错，主要是因为$route包括了一些非编码序列话的特性，比如函数公式、循环引用等；
当使用JSON.stringify($route)时，可能出错TypeError: Converting circular structure to JSON，主要是因为$route目标包括循环引用，即目标内部结构存有彼此引入，造成JSON.stringify()没法实例化这一目标，进而抛出去这一不正确。
解决方案
针对这种情况，你可以将$route对象转换成一个新的纯JavaScript目标，然后进行实例化。可以用Object.assign()方式来完成这一点，如下所示：
JSON.stringify(Object.assign({}, $route))
用这种方法会建立一个新的JavaScript目标，将$route的特性拷贝到这个新目标中，并回到这个新目标。由于这种新目标只包括纯JavaScript数据信息，所以可以快速地实例化它。
通过此次共享加重对知识点了解，也希望可以有一些协助，希望可以多多点赞大力支持～