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

Posted 2023-02-22

【中文标题】创建用于检查 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 项目中不好的页面时，它才会改变。

【参考方案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>