使用 Getter 和 Setter 计算的 Vue 属性不会在 Webpack 中编译

Posted 2023-02-22

【中文标题】使用 Getter 和 Setter 计算的 Vue 属性不会在 Webpack 中编译

【英文标题】：Computed Vue Property with Getter & Setter won't compile in Webpack

【发布时间】：2019-12-10 13:01:23

【问题描述】：

我正在尝试将仅使用 javascript 开发的应用程序转换为 Typescript。我遇到了一个我似乎无法解决的问题。我有一个带有 getter 和 setter 的计算属性，它在通过 Webpack 运行时不会编译。我没有使用类装饰器声明组件的方式，而是使用对象文字语法。

import Vue from "vue"

export default Vue.extend(
  computed: 
   prioritized: 
    get(): any[] 
     return this.$store.getters["blah"];
    
    set(value): void 
     //set value here
    
   
  
)

下面是 webpack 给我的第一个错误：

~listHome.ts(30,29) 中的错误 TS2339：类型 ' get(): any[]; 上不存在属性 '$store'设置（值：未知）：无效； '。

老实说，我对 Typescript 还很陌生，所以在移植这个应用程序时我可能会在这里遗漏一些简单的东西。

【问题讨论】：

你是在 vue 实例中添加 store 对象吗？

在根 Vue 实例中我是这样做的，在同一个组件的其他实例中，特别是其他计算属性，$store 引用工作得很好。只有这个有getter和setter。

【参考方案1】：

如果您使用的是vue-property-decorator，您可以执行以下操作

import  Component, Vue  from "vue-property-decorator"

@Component
export default class GetterSetterTest extends Vue 
  get prioritized() 
    return this.$store.getters["blah"];
  
  set prioritized(value: any) 
     // set the value something like below
     this.$store.commit(.......)
  

【参考方案2】：

哇，想通了。

我错过了“价值”的类型声明，它破坏了一切。有趣

        get(): any[] 
            return this.$store.getters["homeList/sortedPriority"];
        ,
        set(value:any): void 
            var test = 1;
        

【讨论】：

好地方，谢谢 - 这让我有一段时间了，并且在实际导致错误不容易出现在搜索结果中的原因上已经够模糊了！

一些 getter 上缺少类型声明对我来说是触发了这个。你不是在开玩笑“......它破坏了一切”。