Question

我有一个computed方法：

computed: {
  currentPosition () {
    if(this.get_local_storage_state()){
      return this.lastLocation
    }

    if (this.currentRestaurant) {
      return this.currentRestaurant.address.location
    } else if (this.searchPosition.lat && this.searchPosition.lon) {
      return this.searchPosition;
    } else {
      return null;
    }
  }
}

我的<template>中调用了哪个：

<GMap class="c-splitview__map" :markers="getMarkers" :position="currentPosition" :zoom="currentZoom" v-if="currentPosition" />
<div class="m-storefinder__placeholder" v-else>
  <h1 class="o-headline">{{$tc("storefinder.emptyDeeplink")}}</h1>
</div>

由于某种原因，当它第一次被调用时，它会如何工作，但是当我再次尝试调用它时（重新渲染Vue组件）它不会被调用。

BUT！

当我注释掉第一个if()语句时，如下：

computed: {
  currentPosition () {
    // if(this.get_local_storage_state()){
    //  return this.lastLocation
    // }

    if (this.currentRestaurant) {
      return this.currentRestaurant.address.location
    } else if (this.searchPosition.lat && this.searchPosition.lon) {
      return this.searchPosition;
    } else {
      return null;
    }
  }
}

它的工作原理应该如何。

this.get_local_storage_state()函数如下所示，位于methods:{}：

get_local_storage_state(){
  let state = localStorage.getItem('McDonaldsStoreWasOpen');
  return state === "true" ? true : false;
}

我基本上试图将本地存储用作状态管理系统。

Answer 1

localStorage不具有反应性，无法观察到。这与计算值缓存的事实相结合，意味着当您从计算中的本地存储中提取值时，结果将被缓存，并且计算后将始终返回相同的值那。这也是当您从localStorage移除值时计算机恢复工作的原因。

我建议您初始化localStorage中的数据值，在计算中使用该值，然后在稍后的指定时间将值保存回localStorage。

这是codepen demonstrating的差异。

Vue计算方法没有被调用

1 个答案: