创建用于检查 LocalStorage 是否为空的全局函数 - Vue.JS答案

【问题标题】：Create Global Function For Checking If LocalStorage is not empty - Vue.JS创建用于检查 LocalStorage 是否为空的全局函数 - Vue.JS
【发布时间】：2019-01-21 08:01:20
【问题描述】：

我只是想知道如何创建一个全局函数，它检查localStorage 是否不为空，特别是如果里面有token

我尝试的是在我的 main.js 中创建一个全局变量

Vue.$checkIfTokenIsNotEmpty = !!localStorage.getItem('token');
// this returns true or false

在我的组件中，

<template>
    Is token Empty? {{ isTokenIsEmpty }} // I'm able to get true or false here
</template>

<script>
    export default {
        data(){
            return {
                 isTokenIsEmpty: this.$checkIfTokenIsNotEmpty
            }
        }    
    }
</script>

当我重新加载页面时，这可以正常工作。问题是，它不是反应性的或实时的。如果我清除localStorage，我的this.$checkIfTokenIsNotEmpty 的值不会改变。只有当我重新加载在我的 spa vue 项目中不好的页面时，它才会改变。

【问题讨论】：

标签： javascript vue.js vuejs2 vue-component vuex

【解决方案1】：

您可以像这里一样访问令牌：https://jsfiddle.net/djsj8dku/1/

  data: function() {
    return {
        world: 'world',
      get token() {
        return localStorage.getItem('token') || 0;
      },
      set token(value) {
        localStorage.setItem('token', value);
      }
    };
  }

或者您可以使用以下软件包之一：vue-reactive-storage、vue-local-storage

【讨论】：

我不明白。此代码如何知道localStorage 是否具有全局值？
localStorage 是全局对象，可以从组件中访问。
是的，我知道，但是如果 localStorage 不为空，我想要一些可以返回 true 或 false 的全局方法。我现在正在尝试使用 vuex，但我遇到了一些错误，我不确定我应该创建什么样的流程

【解决方案2】：

您无法检测到 localStorage 何时被手动清除，但您可以查看 localStorage 何时更新。所以观察者是你需要的。 Link

关于全局函数，您可以在根组件内设置方法和变量。

new Vue({
  el:"#app",
  data:{
     isTokenIsEmpty:null
  },
  methods: {
      checkIfTokenIsNotEmpty() {
         this.isTokenIsEmpty= !!localStorage.getItem('token');
      }
  }
})

内部组件，

mounted(){
  this.$root.checkIfTokenIsNotEmpty() //can be added anywhere when needed to check localStorage's Availablity
}

HTML

<template> Is token Empty? {{ $root.isTokenIsEmpty }} // I'm able to get true or false here </template>

【讨论】：