背景
在开发 Vue 单页面应用（Single Page Application，SPA）时，我们经常使用 Vuex 管理应用的状态。但是，当页面刷新时，Vuex 中的状态会被清空，这时候我们就需要找到一种方案来解决这个问题。
解决方案
1. 利用浏览器缓存
我们可以利用浏览器缓存的机制，将 Vuex 中的数据存储到浏览器本地存储（localStorage）中。这样，当页面刷新时，我们可以从本地存储中获取数据，并将其还原回 Vuex 中。
下面是一个示例代码：
-- -------------------- ---- ------- -- - -------- - ----- ----- - - -- --- - -- ------------------------ ----- ---------- - ----------------------------------------- -- ----- ------ ------- --- ------------ ------ ----------- -- --- -- -- -- ----- ------------- -------------------------- ------ -- - ----------------------------- ---------------------- --
2. 利用路由参数
我们可以将 Vuex 中的数据存储到路由参数中，这样当页面刷新时，我们可以从路由参数中获取数据，并将其还原回 Vuex 中。
下面是一个示例代码：
-- -------------------- ---- -------
-- - -------- -
----- ----- - -
-- ---
-
------ ------- --- ------------
------
-- ---
--
-- ---- -------------- ----- --------
------ ----- -------------- - -
---------------- ---- ----- ----- -
----- ----- - -----------------
--------------- - ---------------------
------
-
-
-- ---- -------------------- ----- --- ---- -
------ ----- ----------------- - -
---------------- ---- ----- ----- -
----- ---------- - -------------------------- -- -----
------------------------------------
------
-
-3. 利用服务端渲染
使用服务端渲染（Server-Side Rendering，SSR）的应用，可以在服务端将应用的状态保存到页面的 HTML 中，这样当页面刷新时，我们可以从 HTML 中获取数据，并将其还原回 Vuex 中。
此方案不在本文介绍范围内，有需要的读者可以自行查阅相关文档。
总结
以上是解决 Vue SPA 页面刷新后 Vuex 状态被清空的三种常见方案。每种方案都有其适用场景和优缺点，需要根据实际情况选择合适的方案。
值得注意的是，存储敏感信息时需要注意安全问题，尤其是在本地存储中存储数据时，要加密存储以保证数据安全。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/6482847048841e98941e866a