Vue.js berechneter Wert nie beim Start ausgeführt

Question

Meine berechneten Werte erhalten Funktion wird nie ausgeführt, wenn die VM erstellt wird, so dass der Wert, den es sollte nie zugewiesen ist.

Komischerweise wird es ausgeführt, wenn ich versuche, auf den Wert zuzugreifen, es wird nur nie ausgeführt, wenn die App startet.

Grundsätzlich sollte ich den Wert der Haut berechnen und beim Start oder wenn die Stylesheet-Verknüpfung geändert werden sollte, um die richtige Haut zu laden.

Es funktioniert gut, das Problem ist, dass es nicht beim Start ausgeführt wird. Muss ich eine Hacky-Lösung verwenden, um den Wert einmal in der gemounteten Funktion der VM zu bekommen? Oder fehlt mir hier etwas ...

computed: { 
     skin: { 
      get: function() { 
       var mySkin = "my/skin/string"; 
       if (window.localStorage.getItem("skin") === null) { 
        window.localStorage.setItem("skin", mySkin); 
        jquery("link[id='skin']").attr("href", "css/skins/" + mySkin + ".css"); 
       } else { 
        mySkin = window.localStorage.getItem("skin"); 
        window.localStorage.setItem("skin", mySkin); 
        jquery("link[id='skin']").attr("href", "css/skins/" + mySkin + ".css"); 
       } 
       var hey = this.skin; 
       return mySkin; 
      }, 
      set: function (val) { 
       window.localStorage.setItem("skin", val); 
       jquery("link[id='skin']").attr("href", "css/skins/" + val + ".css"); 
      } 
     } 
    } 

Answer 1

Berechnete Eigenschaft ist eine Eigenschaft, die von Dateneigenschaften abhängt.

In Ihrem Fall ist es besser, IMO eine data Eigenschaft skin, und eine Methode, wie setSkin() zu schaffen, die die skin Daten Eigenschaft initialisiert, und eine andere Methode saveSkin() Ihr Eigentum in localstorage zu speichern.

Sie können dann setSkin() in mounted() Hook ausführen.

Vorlage:

new Vue({ 
    el: '#app', 
    data: { 
    skin: '' 
    }, 
    methods: { 
    setSkin: function() { 
     this.skin = ...; 
    }, 
    saveSkin: function() { // call this function when you need to save skin data into localStorage 
     window.localStorage.setItem("skin", this.skin); 
     .... 
    } 
    }, 
    mounted() { 
    this.setSkin(); // retrieve skin data from localStorage, etc. 
    } 
});