typescript - Vuex-Store-Getter gibt [__ob__: Observer] beim Seiten-Refresh zurück

Gegeben den folgenden Code gibt mein Vuex Store-Getter [__ob__: Observer] zurück, wann immer ich die Seite aktualisiere. Ich verwende Vue 2.2.3 und TypeScript.

Die Daten werden beim ersten Laden korrekt geladen, was von einer externen API stammt, aber beim Verwenden des Getters schlägt es fehl und die API muss erneut aufgerufen werden, um die Seiteninformationen zu erhalten.

Hier ist das Konsolenprotokoll nach dem ersten Laden der Seite.

[{…}, {…}, {…}, {…}, __ob__: Observer]

Es gibt 4 Objekte, was korrekt ist, und die Daten werden auf der Seite angezeigt. Ich weiß jedoch nicht, warum am Ende ein Observer hinzugefügt wurde.

Da der Getter beim ersten Laden funktioniert, weiß ich, dass auch der Setter, der die Daten nach dem Abrufen aus der API zum Store hinzufügt, korrekt funktioniert.

Dasselbe Konsolenprotokoll zeigt nur den Observer, wenn ich die Seite aktualisiere.

[__ob__: Observer]

So sieht der Getter in meinem Store aus.

get getItems() {
  console.log('Store items -> ', this.items) // return empty array on page refresh
  // Suggested solution from another SO question 
  var parsedObj = JSON.parse(JSON.stringify(this.items)) 
  return parsedObj
}

Wie oben gezeigt, habe ich die in dieser Frage vorgeschlagene Lösung versucht, aber sie funktioniert trotzdem nicht.

Die Komponente, die den Store verwendet, hat einen ziemlich einfachen Getter-Aufruf. Auch dies funktioniert beim ersten Laden der Seite einwandfrei, aber nicht nach dem Aktualisieren.

async created() {
  const result = await myModule.getItems
  console.log('[dev page] items from store -> ', result) // empty on refresh
  this.fmData = result 
  console.log('fm in Created -> ', this.fmData) // Observer only on refresh
}

Ich weiß, dass Pinia wahrscheinlich heute eine bessere Store-Lösung wäre, aber leider bin ich in diesem Projekt im Moment auf Vuex angewiesen.

Ich bin unsicher, wie ich dieses Problem von hier aus beheben soll.

Antwort #1

Wenn Sie irgendein Store (Vuex oder Pinia) verwenden, gibt es standardmäßig keine Persistenz. Diese Dinge sollten sowieso nicht von Vue gehandhabt werden. Hoffentlich gibt es viele Erweiterungen für beide Stores, die das ermöglichen.

Hier ist meine vorherige Antwort mit allen relevanten Links.

Antwort #2

Zumindest in meinem Fall habe ich nach ein paar Stunden herausgefunden, dass man den Wert im Store über actions, die die mutations aufrufen, setzen muss. Beispiel:

mutations: {
    setUserId(state, id) {      
        state.activeUserId = id;
    }
},
actions: {
    updateUserId: ({commit, state}, id) => {
        commit('setUserId', id)
        return state.activeUserId;
    }
}

Als ich nur die Mutation verwendet habe, bekam ich einen Observer, als ich die Aktion hinzufügte, wurde das Problem behoben und ich konnte auf this.$store.state.activeUserId von jeder Ansicht aus zugreifen.