Question

我有一个nav组件，只有在localStorage中存储了令牌时才需要显示该组件。从localStorage删除该令牌后，nav组件需要注意更改并隐藏自身。

最好的方法是什么？

Answer 1

本地存储不是被动的，因此您需要将令牌存储在某个地方。我假设您的令牌正由应用程序设置和删除。如果是这样，处理此问题的最佳方法是使用类似Vuex（see Vue State Management）的状态。

选项1

如果您使用本地存储以在多个浏览器会话之间保留令牌，最好的选择是在Vuex中设置令牌，然后使用Vuex persisted state将Vuex同步到本地或会话存储。当您需要重新建立状态时，插件将再次检索它。

选项2

如果您需要直接在本地存储中设置，则应在突变中包含在更改状态时设置/取消设置localStorage。这将使您的localStorage和State保持同步。

例如，使用Vuex，如果您在响应中收到令牌，则可以调用Mutation将其设置为Vuex状态，并将其设置为localStorage：

SET_TOKEN(state, payload){
    state.token = payload.token 
    localStorage.setItem('token', payload.token)
}

然后您可以轻松观看Vuex状态。根据您的Vuex设置方式，它可能类似于：this。$ store.state.token

Answer 2

隐藏导航栏不应与设置localStorage相关。我希望这样的事情：

function hideNav() {
  // Inform the application that the nav should hide
  dispatchHideNavAction() 

  // Change localStorage
  deleteTokenFromLocalStorage()
}

如果相反，您的问题是在从其他窗口删除令牌时隐藏导航，那么您可以使用StorageEvent：

window.addEventListener('storage', (e) => {
  if (e.key === 'mytoken' && e.newValue === null) {
    hideNav()
  }
});

NB ：这不会在同一个窗口中有效，但仅限于从其他标签中删除令牌。

Answer 3

假设您自己设置令牌，请将令牌存储在全局状态，并使用vue-persistent-state保留该令牌。该插件适用于简单的应用程序，不需要使用vuex进行状态管理。

例如

import persistentStorage from 'vue-persistent-storage';

const initialState = {
  token: 0  // overwritten if found in localStorage
};
Vue.use(persistentStorage, initialState);

new Vue({
  data: {
    sections: ['Home', 'Edit']
    // we get `token` from persistentStorage
  },
  template: `<nav>
      <a 
        v-for="(section, i) in sections" 
        class="{ active: token === i }"
      >
        {{section}}
      </a>
    </nav>`,
  methods: {
    changeToken: function () {
      // you may change token from other Vue instances too
      this.token = this.token++
      // wrap
      this.token = this.token % this.sections.length
    }
  }
})

token可用作所有组件和Vue实例中的数据。对this.token的任何更改都将存储在localStorage中，您可以像使用vanilla Vue应用程序一样使用this.token。

该插件基本上是观察者和localStorage.set。您可以阅读代码here。它

添加mixin以使initialState在所有Vue实例中都可用，并
注意变化并存储它们。

免责声明：我是vue-persistent-state的作者。

Answer 4

使用@import '../main.sass' form padding: 15px input font-family: $sans-serif font-weight: $normal color: $primary-text margin: 10px padding: 5px border: 4px solid border-radius: 4px button font-family: $sans-serif font-weight: $bold background-color: $primary-button border: 4px solid transparent border-radius: 4px margin: 10px padding: 5px并聆听它可以帮助您使localStorage具有“反应性”，在此处类似的问题https://stackoverflow.com/a/61178486/6714319

中回答了

VueJS - 如何在localStorage中观看值？

4 个答案: