无法使用 TypeScript 从 Vuex 商店将数据导入 Vue 组件答案

【问题标题】：Cannot get data into Vue component from Vuex store using TypeScript无法使用 TypeScript 从 Vuex 商店将数据导入 Vue 组件
【发布时间】：2022-09-23 04:19:07
【问题描述】：

我无法使用 Typescript 将数据输入到我的 Vue 组件中。登录后，我进行 API 调用以获取一些数据。返回数据后，我将使用 Vuex 模块来存储数据。

@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()
       }
      ...
     })

当我导航到另一个 Vue 页面时，我在 created() 内的同一个商店模块上调用以下函数。我将其设为异步/等待，因为我认为这是导致问题的原因。

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

这是商店里的吸气剂

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

上面的两行 console.log 都在控制台中产生相同的结果，如下所示：

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

没有数据，只有一个空数组。

如果有人可以帮助我，我将不胜感激。

我想你忘了调用函数getItems，至少在你将它复制到 Stack Overflow 时是这样。
如果没有回应，你会打电话给reject 吗？
@caTS getItems 在这里被称为 async created() { const storeData = await classesModule.getItems ...}。这部分工作正常。

标签： typescript vue.js async-await vuex

【解决方案1】：

getters: {

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

getter 的第一个参数是状态。您可以从中访问它。

【讨论】：

我使用的是 TypeScript，因此 Vuex 语法与常规 JS 完全不同，您需要显式传递 state。很遗憾，这不是正确的答案。