Vue méthode calculée pas appelé

Question

J'ai une méthode 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; 
    } 
    } 
} 

qui devient appelé dans mon <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> 

Et pour une raison quelconque, quand il est appelé la première fois, cela fonctionne comme il se doit, cependant quand j'essaie de l'appeler à nouveau (en rendant le composant Vue), il n'est pas appelé.

MAIS!

Quand je commente la première déclaration if(), comme ceci:

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; 
    } 
    } 
} 

Il fonctionne comment il devrait à nouveau.

La fonction this.get_local_storage_state() ressemble à ceci et se trouve dans methods:{}:

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

J'essaie essentiellement d'utiliser le stockage local en tant que système de gestion de l'État.

Answer 1

localStorage n'est pas réactif et ne peut pas être observé. Cela, combiné avec le fait que les valeurs calculées sont mis en cache, signifie que lorsque vous extrayez la valeur du stockage local dans le calcul, le résultat sera mis en cache et le calcul retournera toujours la même valeur après cela. C'est aussi pourquoi le résumé calculé fonctionne lorsque vous supprimez la valeur de localStorage.

Je recommande à la place, que vous initialisez une valeur de données de localStorage, utilisez cette valeur dans votre calculé, puis enregistrez la valeur à localStorage à un moment spécifié plus tard. Il s'agit d'un codepen demonstrating la différence.