将 Vue.js appstate 保存到本地存储的最佳事件答案

【问题标题】：Best event to save Vue.js appstate to localstorage将 Vue.js appstate 保存到本地存储的最佳事件
【发布时间】：2019-03-30 04:01:53
【问题描述】：

我正在尝试找出将应用程序状态保存到本地存储的最佳方法，以便在返回应用程序时能够重新创建它。具体来说，这是针对 iOS 网络应用程序（即保存到用户主屏幕）。我不使用 Vuex，因为这是一个简单的应用程序。

目前我正在使用updated()Vue.js lifecycle hook，但我觉得这有点矫枉过正，而且每次状态更改时都保存到本地存储可能是一个性能问题：

var app = new Vue({
    el: '#app',    
    updated: function() {
        this.saveAppState();
    }
});

注意：上面的saveAppState(); 函数是我使用localStorage.setItem() 的地方。

Apple 的Safari Web Content Guide（见表 6-1）建议使用hidepage，例如：

window.addEventListener('pagehide', function(event) {
    app.saveAppState();
}

但是，这只在移动 Safari 中重新加载页面时有效。如果我关闭选项卡或将应用程序添加到主屏幕时，在退出应用程序（点击主页按钮）并返回后，我的状态尚未保存。

我也尝试过 destroyed() 生命周期挂钩，但根本不起作用。

任何见解/建议将不胜感激。

【问题讨论】：

澄清整个想法。假设状态已以某种方式保存到 localStorage，您将如何在下次加载时检索它以便从任何组件访问？
我正在使用 created() Vue.js 生命周期挂钩。
如果更新太频繁，可能每隔 x 时间设置一次 setInterval？它可以检查 localStorage 与应用程序状态，如果有差异，更新 localStorage。

【解决方案1】：

如果您只有一个组件会改变数据，并且只有少数数据点，那么只需对每个可能更改的数据项使用监视。

我没有使用 Vuex，因为这是一个简单的应用程序。

Vuex 不仅仅用于处理大型商店。也就是说，我避免在较小的应用程序中使用 Vuex，因为处理分布在整个应用程序和组件中的商店是可以接受的。我看不到代码或任何细节，所以 YMMV，但是......如果你不热衷于使用 Vuex，你仍然可以实现一些有助于解决这个问题的方面。

创建单个商店
拥有统一的位置意味着您的各种组件引用您的数据，而不是存储它。
通过统一/一致的接口改变状态
对状态的任何更改都应该通过相同的功能或一致的模式来实现。通过这种方式，您可以轻松挂钩数据更改，因此您仅在数据发生变化时更新您的 localStorage。

您可以使用自定义 Vue 函数或总线来实现这一点，但使用 vuex 最简单。

【讨论】：