javascript - Vue 计算方法未被调用

标签 javascript vue.js vuejs2 state computed-properties

我有一个 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 组件)时,它不会被调用。

但是!

当我注释掉第一个 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;
}

我基本上是在尝试使用本地存储作为状态管理系统。

最佳答案

localStorage 不是响应式(Reactive)的,无法观察到。这与计算值被缓存的事实相结合,意味着当您将值从计算中的本地存储中提取出来时,结果将被缓存并且计算后将始终返回相同的值那。这也是当您从 localStorage 中删除值时计算恢复工作的原因。

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

这是一个codepen demonstrating区别。

关于javascript - Vue 计算方法未被调用,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/46695669/

相关文章:

javascript - Material-ui TextField dom元素如何自定义

javascript - 重新加载 JQuery 和 CSS

javascript - 我是否缺少 vue 路由器转换的某些内容?

javascript - 未捕获的类型错误 : Cannot convert undefined or null to object

javascript - 为什么此时此刻的日期不正确?

javascript - Vue.js - 如何在 html 页面中打印包含换行符的字符串变量(从过滤器返回)

vue.js - Vue js + Hateoas 模块

javascript - Vue如何解决Uncaught SyntaxError : Function statements require a function name

javascript - Prop watch 触发无变化

vue.js - 在 Vuejs 中,如何在默认路由器 View 之外呈现组件