将Vue.js应用状态保存到本地存储的最佳事件

Question

我正在尝试找出将应用程序状态保存到本地存储的最佳方法，以便能够在返回到应用程序时重新创建它。具体来说，这是针对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()生命周期挂钩，但这根本没有用。

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

Answer 1

如果您只有一个可以突变数据的组件，并且只有很少的数据点，那么只需对每个可能更改的数据项使用手表即可。

  

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

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

1. 创建一个商店
   拥有统一的位置意味着您的各个组件可以引用而不是存储数据。
2. 通过统一/一致的界面更改状态
   状态的任何更改都应通过相同的功能或一致的模式进行。这样，您可以轻松地挂钩数据更改，因此仅在数据突变时更新您的本地存储 。

您可以使用自定义Vue函数或总线来实现此功能，但最简单的方法是使用vuex。