After each page refresh, my Vuex store getter returns [__ob__: Observer]. The version of Vue being used is 2.2.3 along with TypeScript.
Initially, the data loads correctly from an external API, but when utilizing the getter, it fails and requires another call to the API to retrieve the data for the page.
The console log displays the following after the first page load:
[{…}, {…}, {…}, {…}, __ob__: Observer]There are 4 objects that show up correctly on the page. However, I am puzzled as to why an Observer is appended at the end.
Since the getter works fine on the initial load, I can confirm that the setter responsible for adding the data to the store post API retrieval is functioning properly.
When the page is refreshed, the same console log only showcases the Observer:
[__ob__: Observer]
This is how the getter in my store is structured:
get getItems() {
console.log('Store items -> ', this.items) // shows empty array upon refreshing the page
var parsedObj = JSON.parse(JSON.stringify(this.items))
return parsedObj
}
Despite attempting the solution suggested in this particular question, the issue persists.
The component linked to the store contains a simple getter call, which functions without issues during the initial page load but falters upon refresh:
async created() {
const result = await myModule.getItems
console.log('[dev page] items from store -> ', result) // appears empty upon refresh
this.fmData = result
console.log('fm in Created -> ', this.fmData) // only reveals 'Observer' upon refresh
}
Although Pinia may present a more suitable alternative for managing state today, I am currently restricted to using Vuex for this project.
I am uncertain about the steps to take in order to resolve this issue.