如何制作反应变量，例如 Vue 中的 data()？ Vue+打字稿答案

【问题标题】：How to make reactive variables, like the data() in Vue? Vue+Typescript如何制作反应变量，例如 Vue 中的 data()？ Vue+打字稿
【发布时间】：2019-12-20 22:58:57
【问题描述】：

如何保持变量的反应性，我只想创建一个数据对象，在Vue中模拟一个日期，但也许还有更正常的方法？

我的代码示例：

<script lang="ts">
    import {Vue, Component, Inject} from 'vue-property-decorator';
    import {DependencyConstants} from "@/dependency/DependencyConstants";
    import {WorkspaceService, Employee, EmployeesResponse} from "@/service/WorkspaceService";


    interface Data{
        empList: Employee[];
    }
    @Component({})
    export default class Employees extends Vue {
        @Inject(DependencyConstants.WORKSPACESERVICE)
        private employees !: WorkspaceService;
        private data: Data = {
            empList: [],
        };
        public getEmployees(): void {
            const employees: EmployeesResponse = this.employees.getEmployees(new Date());
            const empList: Employee[] | undefined = employees.employees;
            this.data.empList = empList as Employee[]
        }
        public created(): void {
            this.getEmployees();
        }
    }
</script>

【问题讨论】：

Vue 组件的属性默认是响应式的！无需创建无类型的 Data 对象。

标签： typescript vue.js vuejs2

【解决方案1】：

如果你使用 vue.js 和 typescript，我强烈建议你看看这个link。您将了解如何正确定义数据、计算、方法等。您将找到以下示例：

<template>
  <div>
    <input v-model="msg">
    <p>prop: {{propMessage}}</p>
    <p>msg: {{msg}}</p>
    <p>helloMsg: {{helloMsg}}</p>
    <p>computed msg: {{computedMsg}}</p>
    <button @click="greet">Greet</button>
  </div>
</template>

<script>
import Vue from 'vue'
import Component from 'vue-class-component'

@Component({
  props: {
    propMessage: String
  }
})
export default class App extends Vue {
  // initial data
  msg = 123

  // use prop values for initial data
  helloMsg = 'Hello, ' + this.propMessage

  // lifecycle hook
  mounted () {
    this.greet()
  }

  // computed
  get computedMsg () {
    return 'computed ' + this.msg
  }

  // method
  greet () {
    alert('greeting: ' + this.msg)
  }
}
</script>

如果您想要响应式数据，您可以使用属性访问器 (get) 来声明计算属性。

根据我对您的代码的理解，您可以这样做：

@Component({})
export default class Employees extends Vue {
    @Inject(DependencyConstants.WORKSPACESERVICE)
    private employees !: WorkspaceService;

    get employees() {
        const employees: EmployeesResponse = this.employees.getEmployees(new Date());
        const empList: Employee[] | undefined = employees.employees;
        return empList
    }

    public created(): void {
        this.getEmployees();
    }
}

您可以从您的模板直接访问employees。例如：

<template>
  <ul>
    <li v-for="employee in employees" :key="employee.id">
      {{employee.name}} // I assume your employee have an id and a name
    </li>
  </ul>
</template>

【讨论】：

但是 tslint 的警告告诉调用 this.getEmployees(); '不能调用可能是'未定义'的对象，'不能调用类型缺少调用符号的表达式。类型 Employee[] 没有兼容的调用签名'
是的，这是真的，因为你的 tslint 没有看到你在 created 钩子中初始化它。您可以在此行禁用 tslint 或设置警卫：this.employees && this.employees.getEmployees(new Date()) 和下一行 employees && employees.employees

【解决方案2】：

任何类变量在 vue+ts 中都是响应式的。类似于在 vue+js 中定义数据中的变量，任何 getter 都是计算属性，方法是 vue js 中的常规方法。

 import {Component, Prop, Vue, Watch } from 'vue-property-decorator'      
 @Component
 export default class Employee extends Vue {
        // Props
        @Prop({required: true}) Name!: string 

       // data (reactive)
       salary:number

       // computed
       get bonus(){
         return this.salary * this.performanceMetric
       }

       // methods
       addSalary(salary:number){
       }

       // watcher
       @Watch('Name') 
       watchNameChange(newName:string, oldName:string){

       }

       // life cycle hook.
       mounted(){

       }
  }

【讨论】：