VueJS - 如何查看 localStorage 中的值？

Question

我有一个nav组件，只需要在localStorage. 当该令牌从删除localStorage的nav组件需要注意的是变化和隐藏自身。

解决这个问题的最佳方法是什么？

Answer 1

本地存储不是响应式的，因此您需要将您的令牌存储在某个位置。我假设您的令牌正在被应用程序设置和删除。如果是这样，最好的处理方法是使用像 Vuex 这样的状态（参见 Vue 状态管理）。

选项1

如果你使用本地存储来在多个浏览器会话之间保留令牌，最好的选择是在 Vuex 中设置令牌，然后使用Vuex 持久化状态将 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