在 Vue JS 中，如何在页面刷新时存储组件的 "data" (true/false)？

Question

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

导航栏 open/close 状态使用 true/false 布尔值存储在组件的数据中。

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

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

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

谢谢。

Answer 1

如果您的应用程序 large/is 变得越来越复杂，请使用 this one 等插件的 Vuex。虽然它有点学习曲线，所以如果您只有几件事来跟踪它们的状态，那么本地存储将是一个很好的解决方案。

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

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

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