Vuex，vue-router和处理页面重新加载（F5）

我正在使用vue-router和vuex切换我正在构建的单页应用程序。但这是我的第一个SPA，所以我正在陷入一些新手问题。我有东西工作，我想，我的产品列表和编辑模式，通过/product/list和/product/edit成功路由，然后我发现（意料之中）事情打破了编辑模式，当我重新加载使用F5（或Ctrl键的页面 - F5）。编辑模式取决于在列表模式下设置的状态，并且在没有发生重新加载之后。Vuex，vue-router和处理页面重新加载（F5）

所以我的问题是一个一般的建筑。做这种事情的最好方法是什么？我应该尝试将Vuex状态持久化到本地还是会话存储，以便它能够在重新加载后生存下来？还是应该确保使用路由URL中的信息（我目前没有这样做）能够重新生成状态？也就是说，我不应该将网址设置为/product/list，而应该有/product/list?search=whatever&order=field，以便重新加载时可以再次执行搜索和排序。同样，而不是/product/edit，我会有/product/edit?id=12345，所以如果页面被刷新，特定的产品可以再次加载。

我的偏好是将状态持久保存到localStorage（我不必与没有存储的浏览器相抗衡）。但是我想知道我是否以错误的方式接触SPA设计，我仍然应该以REST术语思考它，即使它全部在一个页面内发生。

来源

2017-01-25 John Moore

我应该补充说，它不需要很长时间来解决我的具体问题，使用window.beforeunload将商店的状态保存到sessionStorage，并在创建商店时测试此SessionStorage的现有值。不过，我仍然怀疑我是否为未来创造了问题。 –

我已经通过在URL中保存ID并在重新加载时重新获取数据来处理此问题。当然你可以坚持本地存储，但当有人将该URL发送给其他用户时会发生什么？或书签它，然后清除他们的浏览器缓存？大多数用户希望能够回到他们所在的页面。

来源

2017-02-15 13:15:13 Justin

这是一个公平的观察。碰巧，在具体的情况下，这些考虑不太可能适用。如果发生这种情况，我会测试不一致的状态并重定向到/ product/list，但在实践中不太可能发生。但值得考虑未来。 –

Vuex，vue-router和处理页面重新加载（F5）

回答

相关问题