Cannot get data into Vue component from Vuex store using TypeScript

mikeym 0
Viewed 25

I am having trouble getting data into my Vue component using Typescript. After logging in I make an API call to get some data. Once the data is returned I am using a Vuex module to store the data.

@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 // store the response in a module variable
         resolve()
       }
      ...
     })

When I navigate to another Vue page I call the following function on the same store module inside created(). I made it async/await because I thought that was causing the issue.

 async created() {
    const storeData = await classesModule.getItems 
    this.myData = storeData
    console.log('Data in Created -> ', this.myData) // Nothing here
 }

Here is the getter in the store

get getItems() {
    console.log('GET THE ITEMS object -> ', this.items) // Nothing here   
    return this.items
  }

Both of the console.log lines above produce the same result in the console, which is the following:

[__ob__: Ot]
length: 0
__ob__: Ot {value: Array(0), dep: _t, vmCount: 0}
[[Prototype]]: Array

There is no data, just an empty array.

If anyone can help me with this I'd much appreciate it.

vuex async-await typescript vue.js
1 Answers
getters: {

  getItems(state) {
    console.log('GET THE ITEMS object -> ', state.items) 
    return state.items
  }
}
state:{
     items:[]
}

the first param of getters is state. you can access it from that.

meet vaghsiya0
Related