4

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

2 回答 2

5

如果您使用 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>
于 2019-08-14T11:55:26.527 回答
1

任何类变量在 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(){

       }
  }
于 2020-03-27T17:50:35.720 回答