在 Vue JS 中，如何在页面刷新时存储组件的“数据”（真/假）？

Question

在 Laravel 中使用 Vue Js 我想在用户刷新页面时保持打开一个扩展的导航栏（如果他们最初选择打开它）。

导航栏打开/关闭状态以 true/false 布尔值存储在组件的数据中。

由于研究了各种选择，我对采用哪种方法有点困惑，所以作为菜鸟寻求最好的建议。 理想情况下，有一种简单的方法可以让“数据”保留在我的组件中，而不是重新渲染为默认值 false！ 因此我想它需要在本地存储在用户的“会话”状态中，对吗？

但是我使用什么以及如何使用？

• 会话存储
• 本地存储
• Vuex - https://v2.vuejs.org/v2/guide/state-management.html
• 一个插件 - https://github.com/vuejs/vuex
• Laravel 会话 - https://laravel.com/docs/5.5/session

谢谢。

Answer 1

如果您的应用程序很大/越来越复杂，则 Vuex 可以使用这样的插件。 虽然它有点学习曲线，所以如果你只有几件事来跟踪它们的状态，那么 localstorage 将是一个很好的解决方案。

Localstorage 的优点是易于使用，被广泛采用，如果您将来需要，它可以很好地与 vuex 等状态管理系统集成。 该 api 非常简单，实际上只是getItem和setItem用于常见的简单用例。 它也会在浏览器会话中持续存在。

https://developer.mozilla.org/en-US/docs/Web/API/Window/localStorage

Sessionstorage 大致相当于 localstorage，主要区别在于一旦关闭浏览器，它就会被擦除。