51.页面刷新后 Vuex 的数据丢失怎么解决？ ​

Vuex 的数据是保存在前端应用的内存中的，刷新页面会导致内存清空，数据丢失

• 使用持久化存储：将 Vuex 的数据保存到浏览器的本地存储（LocalStorage 或 SessionStorage）也可以采用 vuex-persistedstate 持久化插件进行本地存储。

• 每次获取数据前检测 Vuex 数据是否存在，不存在则发请求重新拉取数据，存储到 Vuex 中。

插件原理

• 应用加载时获取存储的状态进行替换。
• 状态变化后将状态同步到浏览器存储中。

那如何监听 Vuex 中数据的变化？

• 通过 watch 监控 vuex 中状态变化。
• 通过 store.subscribe （本质也是 watch） 监控状态变化。