2017-07-19 3 views
2

ich ein Datepicker bin mit einem moment.js Datum einzustellen, die in meinem Vuex Speicher gesetzt wird:Vuex Getter wird nicht aktualisiert

Shop Zustand:

const state = { 
    arrival: '', 
    departure: '' 
} 

Getter:

const getters = { 
    arrival: state => state.arrival, 
    departure: state => state.departure, 

    prettyArrival: (state) => { 
     if (state.arrival instanceof moment) { 
      return state.arrival.format(state.prettyFormat); 
     } 

     return ''; 
    } 
} 

Mein vuex-Shop aktualisiert den Ankunftsstatus ordnungsgemäß (was ein Objekt moment.js ist), weil ich deutlich die Devtools sehen kann, die die Updates und den ursprünglichen Zustand zeigen, der sich ändert.

Die prettyArrival wird nicht ordnungsgemäß aktualisiert. Es wird nur einmal gesetzt, wenn sich die Ankunft von einem leeren String zu einem moment.js Objekt ändert.

Meine Ankunft Getter zeigt in den devtools wie folgt aus:

arrival:"2017-07-21T09:15:53.770Z" 

Wenn ich es einzuloggen bekomme ich das moment.js Objekt obwohl mit scheint reactiveGetters und reactiveSetters so die Reaktivität an Ort und Stelle scheint zu enthalten.

Ist etwas nicht in Ordnung mit, wie ich meinen Getter aufstelle oder ist etwas anderes hier falsch?

Alle Tipps sind willkommen, wenn Sie weitere Informationen benötigen, lassen Sie es mich wissen.

+0

Was meinst du mit 'prettyArival wird überhaupt nicht aktualisiert (..) es wird nur einmal gesetzt'. Also * wird * aktualisiert? Debug (oder zumindest Log-Anweisungen) innerhalb dieser Methode und innerhalb der if-Anweisung. In den Daten sagen Sie, dass der Standardwert eine leere Zeichenfolge ist, aber dann übergeben Sie Moment Objekt - scheint nicht richtig zu mir, aber das könnte ein kleines Problem sein. –

+0

@AndreyPopov Bei der Verwendung von 'consolg.log' im Getter scheint es nur den' prettyArrival'-Getter beim ersten Mal zu rufen, dann ergreift es den Anruf erneut. Ich vermute, es hat etwas mit Caching zu tun: 'Das Ergebnis eines GETTERS wird basierend auf seinen Abhängigkeiten zwischengespeichert und wird nur neu ausgewertet, wenn sich einige seiner Abhängigkeiten geändert haben. Aber ich habe keine Ahnung, wie das intern funktioniert. –

+0

Versuchen Sie stattdessen, den Standardwert auf '{}' zu ändern. Fügen Sie auch die berechnete Eigenschaft für diesen Getter hinzu - es könnte eine Neuberechnung erzwingen;) –

Antwort

1

Die Lösung liegt in dieser Antwort:

Why does vue.js not update the dom with datepicker using moment.js

ich nicht glaube, dies der Fall war, da ich noch ein paar Eingänge hatte, die richtig aktualisiert wurden. Wie ich das zur Arbeit bekommen habe, ist immer noch ein Mysterium, das ich lösen muss.

Die moment.js Instanzen sind nicht reaktiv, so dass Sie es durch das Werfen Sie Ihre moment.js Instanz in den Konstruktor und eine neue erstellen, jedes Mal beheben können Sie es wie so gesetzt:

moment(this.currentDate) 

this.currentDate ist ein Moment, .js Instanz in diesem Fall.