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

Question

如何保持变量的反应性，我只想过创建一个数据对象，在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>

Answer 1

如果您使用 vue.js 和 typescript，我强烈建议您查看此链接。您将找到如何正确定义数据、计算、方法等。您会发现以下示例：

<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>