Vue의 data()와 같은 반응형 변수를 만드는 방법Vue+타입 스크립트

Vue의 data()와 같은 반응형 변수를 만드는 방법Vue+타입 스크립트

변수의 반응성을 유지하는 방법은 데이터 개체를 생성하여 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.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>

모든 클래스 변수는 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(){

       }
  }

언급URL : https://stackoverflow.com/questions/57493790/how-to-make-reactive-variables-like-the-data-in-vue-vuetypescript