如何在 vue js 中重用 es6 class？

Question

如何在 Vue Js 中重用一些现有的 ES6 classes。

有一个 class 有一个变量被 observable 更新。

class A { 
    public a: string;
    someobservable.subscribe((a) =>{
         this.a = a;
    })
}

在vue.JS中创建了这个class的对象。

示例如何使用属性：

created: {
    objA = new A();
}
methods: {
    getA() {
        if(this.objA !== undefined){
            return objA.a;
        }
    }
}

在 vue 模板中：

<div>{{getA()}}</div>

模板中的值与 class 中的变量值不同步。

有没有其他方法可以在 Vue 模板中使用属性，它会实时更新。

Answer 1

它应该作为计算属性而不是方法与 getA() 一起使用。此外，您可以跳过 if 语句，因为没有 return 语句会 return undefined。

computed: {
  getA() {
    return objA.a;
  }
}

Answer 2

您正在全局范围内创建实例。您需要在 data 字段中实例化您的对象，以便 vue 能够跟踪任何更改..

data: {
    objA: new A();
},

然后你可以像你一样使用方法..

methods: {
    getA() {
       return this.objA.a;
    }
},

<div>{{getA()}}</div>

或者像其他人所说的那样使用计算属性 ..

computed: {
    getA() {
       return this.objA.a;
    }
}

<div>{{getA}}</div>

两者的效果相同，但最好使用计算属性来利用缓存。

how to reuse es6 class in vue js?