是否可以使用本地存储来节省导航抽屉的可见性？

Question

我有个导航抽屉

<v-navigation-drawer ...content... </v-navigation-drawer>

还有一个菜单按钮，它隐藏/显示导航抽屉。

<v-btn @click.stop="drawer = !drawer"> Menu </v-btn>

如果刷新/更改页面，则需要单击按钮再次显示/隐藏导航抽屉。是否有可能使用本地存储器。

https://v2.vuejs.org/v2/cookbook/client-side-storage.html

...to“保存”导航-抽屉是否隐藏/访问？

我已经检查了文档/ googled，但无法找到如何做到这一点。

Answer 1

是的，您可以简单地使用localStorage来实现

演示:

​

new Vue({
  el: '#app',
  data: {
    drawer: false
  },
  mounted() {
    const localStorageValue = JSON.parse(localStorage.drawer);
    this.drawer = localStorageValue ? localStorageValue : false;
  },
  methods: {
    setDrawer() {
     this.drawer = !this.drawer
     localStorage.drawer = this.drawer;
    }
  }
})

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>
<div id="app">
  <button @click.stop="setDrawer">Menu</button> <!-- replace this with vuetify v-btn component -->
  <div v-if="drawer">Show Me!</div> <!-- replace this with v-navigation-drawer component -->
</div>

​

Answer 2

您提供的链接具有必要的信息，您需要在安装组件时从本地存储读取抽屉状态，并在状态更改时保存它。

在您的@click处理程序中调用方法toggleDrawer()，而不是像这个@click.stop="toggleDrawer()"那样的drawer = !drawer，或者在抽屉变量上使用一个观察者，并在它更改时更新localStorage。

const app = new Vue({
  el: '#app',
  data: {
    drawer: false
  },
  mounted() {
    // Read value from local storage
    if (localStorage.drawer) {
      this.drawer = JSON.parse(localStorage.drawer);
    }
  },
  methods: {
    toggleDrawer() {
      this.drawer = !this.drawer;
      // Save value in local storage
      localStorage.drawer = this.drawer;
    }
  }
})