typescript - Vuex store getter returnerer [__ob__: Observer] ved oppdatering av siden

Gitt følgende kode returnerer getter-en i Veux-butikken min [__ob__: Observer] hver gang jeg oppdaterer siden. Jeg bruker Vue 2.2.3 og TypeScript.

Dataene lastes korrekt ved første lasting, som kommer fra en ekstern API, men når man bruker getter mislykkes det, og API-en må kalles igjen for å hente sideinformasjonen.

Her er konsollloggen etter den første sideinnlastingen.

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

Det finnes 4 objekter, noe som er riktig, og dataene vises på siden. Jeg vet imidlertid ikke hvorfor det er lagt til en Observer på slutten.

Gitt at getteren fungerer ved første lasting, vet jeg at setteren som legger til dataene i butikken etter å ha hentet dem fra API-et også fungerer korrekt.

Den samme konsollloggen produserer bare Observer når jeg oppdaterer siden.

[__ob__: Observer]

Slik ser getteren i butikken min ut.

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
}

Som vist ovenfor, har jeg prøvd løsningen som ble foreslått i dette spørsmålet, men det fungerer fortsatt ikke.

Komponenten som bruker butikken har et ganske enkelt getter-kall. Igjen fungerer dette fint ved første sideinnlasting, men ikke etter oppdatering.

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
}

Jeg vet at Pinia sannsynligvis ville vært en bedre butikk-løsning i dag, men dessverre er jeg stuck med Vuex på dette prosjektet for øyeblikket.

Jeg er usikker på hvordan jeg skal løse dette problemet herfra.

Svar #1

Hvis du bruker en hvilken som helst butikk (Vuex eller Pinia), vil det ikke være noen vedvarende lagring som standard. Disse tingene skal uansett ikke håndteres av Vue. Forhåpentligvis finnes det mange utvidelser for begge butikkene som gjør det mulig.

Her er mitt forrige svar med alle de relevante lenkene.

Svar #2

I hvert fall i mitt tilfelle, etter å ha brukt noen timer, fant jeg ut at du må sette verdien i butikken ved å bruke actions som kaller mutations. Eksempel:

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

Da jeg bare brukte mutasjonen, fikk jeg observer, når jeg la til handlingen, ble problemet løst og jeg kunne få tilgang til this.$store.state.activeUserId fra hvilken som helst visning.