유틸리티 클래스 설정 및 vue 구성 요소 내에서 사용

유틸리티 클래스 설정 및 vue 구성 요소 내에서 사용

현재 작업 중인 vue 어플리케이션에는 날짜 함수와 관련된 코드 중복이 많이 있습니다.이러한 용장성을 줄이기 위해 아래와 같이 유틸리티 클래스를 생성하여 컴포넌트 내의 Vue 데이터 속성에 설정하여 날짜 함수를 호출하고 싶습니다.

나는 이것을 실행하는 최선의 방법에 대해 확신이 없다.현재 구현에서 다음과 같은 오류가 발생합니다.TypeError: this.dates is undefined이 에러를 해결할 뿐만 아니라, Vue 환경에서 최선의 표준을 사용해 클래스를 작성/활용하는 것이 저의 목표입니다.

유틸리티 클래스 가져오기

    import Dates from "./utility/Dates";
...

요소

const contactEditView = Vue.component('contact-edit-view', {
        data() {
            return {
                contact: this.myContact
                dates: Dates
            }
        },
...

Dates.js

export default {
    dateSmall(date) {
        return moment(date).format('L'); 
    },
    dateMedium(date) {
        return moment(date).format('lll');
    },
    dateLarge(date) {
        return moment(date).format('LLL');
    }
};

보다

Date of Birth: {{ dates.dateMedium(contact.dob) }}

이를 위해 Vue에서 플러그인 옵션을 사용하는 것이 좋습니다.Vue 플러그인 정보

services라는 이름의 새 폴더를 만들고 CustomDateFormater.js 파일을 추가합니다.

const dateFormater = {}

dateFormater.install = function (Vue, options) {

   Vue.prototype.$dateSmall = (value) => {
     return moment(date).format('L')
   }

   Vue.prototype.$dateMedium = (value) => {
     return moment(date).format('lll')
   }
}

main.js:

import YourCustomDateFormater from './services/yourCustomDateFormater'

Vue.use(YourCustomDateFormater)

이렇게 어디서든 사용할 수 있습니다.

this.$dateSmall(yourValue)

---

아니면 믹스인을 쓰려면.믹스인에 대한 자세한 내용은 이쪽

새 파일 dateFormator.js를 만듭니다.

export default {
  methods: {
    callMethod () {
      console.log('my method')
    }
  }
}

컴포넌트:

import dateFormater from '../services/dateFormater'

  export default {
    mixins: [dateFormater],
    mounted () {
      this.callMethod() // Call your function
    }
  }

주의: "글로벌 믹스인은 서드파티 컴포넌트를 포함하여 작성된 모든 Vue 인스턴스에 영향을 미치기 때문에 신중하게 사용하십시오. 대부분의 경우 위의 예시와 같이 커스텀옵션 처리에만 사용해야 합니다. 중복 어플리케이션을 피하기 위해 플러그인으로 출하하는 것도 좋습니다.- Vue 매뉴얼

날짜 Utilsjs

import moment from 'moment-timezone'

function formatDateTime(date) {
    return moment.utc(date).format("M/D/yyyy h:mm A")
}

export { formatDateTime }

컴포넌트 JS

...
import { formatDateTime } from '../utils/dateUtils'
...
methods: {
    formatDateTime,
}

컴포넌트 내에서 사용

{{ formatDateTime(date) }}

언급URL : https://stackoverflow.com/questions/48424550/setting-up-a-utility-class-and-using-it-within-a-vue-component