**

2023-11-27 02:05:30

技术博客 | 忆起一次 Vuex 报错之经历

引言：

每一次的编程之旅中，总少不了与各类报错的邂逅。这些报错犹如编程世界中的暗礁，时刻考验着开发者们的耐心与智慧。近日，笔者在使用 Vuex 的过程中，便遇到了一个令我颇为头疼的报错——“$route 序列号错误”。本文将详细记录这次报错的排查历程，分享笔者的经验与思考，希望能对其他开发者有所裨益。

发现问题：

故事的开端源自一次看似普通的页面刷新。在对 Vuex 存储的数据进行修改后，我自信满满地刷新了页面，期待着修改后的数据能够如愿更新。然而，迎接我的是一条冰冷的报错信息：“$route 序列号错误”。

初步排查：

面对报错，我首先检查了代码中的路由定义，确认其正确无误。接下来，我尝试使用 Vuex 的调试工具，希望从中找到一些蛛丝马迹。然而，调试工具并没能提供有价值的信息，我只能继续摸索其他可能的解决办法。

分析原因：

经过一番深入的分析，我逐渐意识到：route 是 Vue Router 中的一个响应式对象，它的值在页面刷新时会被重置。而由于我在页面加载时从 route 中获取了数据并将其存储在 Vuex 中，因此在页面刷新后，Vuex 中的数据便会与更新后的路由数据产生不一致。

解决方案：

理解了问题根源后，我着手寻找解决方案。一种常见的做法是在页面加载时，将路由数据直接存储在 Vuex 中。然而，这种做法会破坏 Vuex 的响应式特性，导致在路由变化时 Vuex 中的数据无法及时更新。

最终，我找到了一个更优雅的解决办法：使用 Vuex 的持久化存储功能。通过在 Vuex 配置中添加持久化插件，我可以确保在页面刷新后，Vuex 中的数据仍能保持原样。

具体步骤：

// main.js
import Vue from 'vue'
import Vuex from 'vuex'
import VuexPersistence from 'vuex-persist'

Vue.use(Vuex)

const vuexLocal = new VuexPersistence({
  storage: window.localStorage
})

export default new Vuex.Store({
  plugins: [vuexLocal.plugin]
})