Vue.js에서 TypeScript를 사용하여 계산 소품을 사용하는 방법

Vue.js에서 TypeScript를 사용하여 계산 소품을 사용하는 방법

JavaScript Vue.js는 TypeScript를 사용합니다.는 어떻게 하느냐입니다.computed의 vue(TypeScript)

공식 예에 따르면computed종속된 소품을 기반으로 캐시되는 기능을 가진 객체입니다.

다음은 제가 만든 예입니다.

import Vue from 'vue';
import { Component } from "vue-property-decorator";

@Component({})
export default class ComputedDemo extends Vue {
    private firstName: string = 'John';
    private lastName: string = 'Doe';
    private computed: object = {
        fullName(): string {
            return `${this.firstName} ${this.lastName}`;
        },
    }
}

html:

<div>
    <h1>Computed props ts demo</h1>
    <ul>
        <li>First name: {{firstName}}</li>
        <li>Last name: {{lastName}}</li>
        <li>Together: {{fullName}}</li>
    </ul>
</div>

세 번째 목록 항목은 아무것도 출력하지 않습니다.하면 좋을까요?computed★★★★★★★★★★★★★★★★★?

속성 액세스자를 사용하여 계산된 속성을 선언할 수 있습니다.Vue 클래스 구성 요소를 참조하십시오.입력을 입력하는 즉시 getter가 트리거됩니다.

예를 들어 다음과 같습니다.

<template>
    <div>
        <input type="text" name="Test Value" id="" v-model="text">

        <label>{{label}}</label>
    </div>

</template>

<script lang="ts">
import { Component, Vue, Watch } from "vue-property-decorator";

@Component({})
export default class About extends Vue {
    private text = "test";

    get label() {
        return this.text;
    }
}
</script>

---

Vue 구성 API 업데이트

<template>
  <div>
    <input type="text" name="Test Value" id v-model="text" />

    <label>{{label}}</label>
  </div>
</template>

<script lang="ts">
import { defineComponent, ref, computed } from "@vue/composition-api";

export default defineComponent({
  setup() {
    const text = ref("test");

    const label = computed(() => {
      return text.value;
    });

    return {
      text,
      label
    };
  }
});
</script>

Vue 선언 파일의 순환 특성 때문에 TypeScript는 특정 메서드의 유형을 추론하는 데 어려움이 있을 수 있습니다.따라서 렌더 및 계산된 메서드와 같은 메서드에 반환 유형에 주석을 추가해야 할 수 있습니다.

import Vue, { VNode } from 'vue'

const Component = Vue.extend({
  data () {
    return {
      msg: 'Hello'
    }
  },
  methods: {
    // need annotation due to `this` in return type
    greet (): string {
      return this.msg + ' world'
    }
  },
  computed: {
    // need annotation
    greeting(): string {
      return this.greet() + '!'
    }
  },
  // `createElement` is inferred, but `render` needs return type
  render (createElement): VNode {
    return createElement('div', this.greeting)
  }
})

유형 추론 또는 구성원 완료가 작동하지 않는 경우, 특정 메서드에 주석을 다는 것이 이러한 문제를 해결하는 데 도움이 될 수 있습니다.--noImplicit 사용어떤 옵션이라도 이러한 주석 없는 메서드의 대부분을 찾는 데 도움이 됩니다.

상세 정보

Vite Vue 3.2+ TypeScript

<template>
    <input type="text" v-model="title" />
</template>

<script setup lang="ts">
import { computed } from 'vue';
import { useStore } from 'vuex';

const store = useStore()

const title = computed({
    get: () => store.state.page.about.title,
    set: value => store.commit('setData', { about: { title: value }})
})
</script>

" " "setData

setData(state: { about: any, blog: any, contact: any, home: any }, data: any) {
     if (data['about']) state.about = { ...state.about, ...data.about }
     if (data['blog']) state.blog = { ...state.blog, ...data.blog }
     if (data['contact']) state.contact = { ...state.contact, ...data.contact }
     if (data['home']) state.home = { ...state.home, ...data.home }
}

의 함수에서는 를 사용합니다....이치노

언급URL : https://stackoverflow.com/questions/51982139/how-to-use-computed-props-in-vue-js-with-typescript