I'm facing an issue with fetching data in my Vue component using Typescript. Upon logging in, I trigger an API call to retrieve data. Once the data is received, I store it using a Vuex module.
@Action async getData(): Promise<TODO> {
return new Promise<TODO>((resolve, reject) => {
getData("getData").then(res => {
if(res) {
console.log('Result -> ', res) // Data is here
this.items = res // save response in a module variable
resolve()
}
...
})
When I switch to another Vue page, I invoke the following function from the same store module within created(). I made it async/await thinking that was causing the problem.
async created() {
const storeData = await classesModule.getItems
this.myData = storeData
console.log('Data in Created -> ', this.myData) // No data found
}
Here's the getter function in the store:
get getItems() {
console.log('GET THE ITEMS object -> ', this.items) // No data found
return this.items
}
Both console.log statements above show the same result in the console, which looks like this:
[__ob__: Ot]
length: 0
__ob__: Ot {value: Array(0), dep: _t, vmCount: 0}
[[Prototype]]: Array
The array is empty, indicating there's no data present.
If anyone can assist me with this issue, I would greatly appreciate it.