Watcher 内 Vue 类组件装饰器的访问方法

Posted 2023-02-23

【中文标题】Watcher 内 Vue 类组件装饰器的访问方法

【英文标题】：Access Method from Vue Class Component Decorator inside a Watcher

【发布时间】：2021-01-31 01:40:33

【问题描述】：

基本上我和 Github 上的 this 和 this 问题有相同的问题，不幸的是，这两个问题在回答之前都已关闭：/

我正在使用带有 Typscript 和 Vue 类组件的 Vue。 我需要做的是从@Component 装饰器内的观察者内部访问我的（Vue-）类的方法。 我知道使用this.$data 可以访问组件的数据，但是方法呢？

我的代码在运行时工作，但在 vscode 中产生编译时错误和错误（“属性 'clearInfo' 不存在于类型 'Vue'。”）；

@Component(
  watch: 
    firstMesh(newMesh) 
      if (newMesh === undefined) this.clearInfo(1);   // this produces the errors
      else this.showMeshInfo(newMesh, 1);
    ,
    secondMesh(newMesh) 
      if (newMesh === undefined) this.clearInfo(2);
      else this.showMeshInfo(newMesh, 2);
    ,
  ,
)


export default class Info extends Vue 
  clearInfo(whichMesh : number) 
...
  

  showMeshInfo(mesh : any, index : number) 
    ....
  

【参考方案1】：

你有两个选择：

在类本身中定义手表

// first you need to install vue-property-decorators with npm i -S vue-property-decorator
// This library has a lot of useful decorators. You can read more about it here: https://github.com/kaorun343/vue-property-decorator

import  Vue, Component, Watch  from 'vue-property-decorator'


@Component
export default class Info extends Vue 
  @Watch('firstMesh')
  public watchFirstMesh(newValue) 
     // ... do whatever you need to do with the newValue here
  

  @Watch('secondMesh')
  public watchSecondMesh(newValue) 
     // ... do whatever you need to do with the newValue here
  

在@Component 的选项部分定义监视和方法

@Component(
  watch: 
    firstMesh(newMesh) 
      if (newMesh === undefined) this.clearInfo(1);   // this produces the errors
      else this.showMeshInfo(newMesh, 1);
    ,
    secondMesh(newMesh) 
      if (newMesh === undefined) this.clearInfo(2);
      else this.showMeshInfo(newMesh, 2);
    ,
  ,
  methods: 
   clearInfo(whichMesh : number) 
     ...
   ,
   showMeshInfo(mesh : any, index : number) 
     ....
      
  
)
export default class Info extends Vue 
  // Now you need to tell to typescript that there will be a method inside this class called clearInfo and showMeshInfo
  public clearInfo!: (wichMesh: number) => void;
  public showMeshInfo!: (mesh: any, index: number) => void;

说明

解释可以在我留下的链接上阅读

由于您在装饰器@Component(...) 中定义选项，这将在类将被实例化的上下文中可用。 Typescript 不知道究竟有什么可用（我们希望它那么聪明）。你必须告诉它，这就是我们有public clearInfo!: (wichMesh: number) => void; 部分的原因。如果你不知道这个语法是什么意思，我会简明扼要地解释一下，最后留下一个链接：

public clearInfo!: (wichMesh: number) => void;

the ! part is called the non-null assertion operator. It is a way to tell the compiler "this expression cannot be null or undefined here, so don't complain about the possibility of it being null or undefined."

The (wichMesh: number) => void; is the function signature. Basically it says: this will be a function that receives as the first argument a number (whichMesh) and returns void (=> void)

Non null assertion typescript Function signature typescript

【讨论】：

很棒且内容丰富的答案，谢谢！我最终决定采用第一个解决方案，因为不知何故我已经安装了 vue 属性装饰器，可能是通过 vue typscript 插件。