[vue] dispatch에서 함수 호출

qwe8851·2025년 10월 29일

☘️ vue

목록 보기
11/11

dispatch로 호출할 떄,

import { mixinEntry } from '@/utils/entryFunc'

mixinEntry.methods.getEntryStatus()

이런식으로 함수를 불러올 수 있는데, 만일 해당 함수에서 this.~으로 변수를 사용하고 있다면
this를 바인딩해줘야함.

그래서 bind(mixinEntry.data())
이런식으로 this를 바인딩해줘야 해당 함수 안에서 this를 정상적으로 불러올 수 있음

e.g.
const entryStatus = mixinEntry.methods.getEntryStatus.bind(mixinEntry.data())(Status, item.RetrievedAt, item.UseEnd) // this 바인딩

/**
 *
 * @param {number} status 상태
 * @param {string} retrievedAt 회수일시
 * @param {string} useEnd 사용 종료일
 * @returns 출입 상태
 */
getEntryStatus(status, retrievedAt, useEnd) {
  const [year, month, day] = useEnd?.split('-')?.map(Number) || []
  const endOfDay = new Date(year, month - 1, day, 23, 59, 59)
  const now = new Date()
  const isExpired = now > endOfDay // 사용 기간 만료 여부

  const isDoneStatusMap =
    this.defaultHeaders?.Status?.filterList?.filter((i) => ['gray', 'brand'].some((c) => c == i.class) && typeof i.value === 'number')?.map((i) => i.value) || [] // 완료 상태 목록
  const isAutoCancel = isExpired && !isDoneStatusMap.includes(status) // 자동 취소 여부
  const isRevoke = retrievedAt // 회수 여부

  const entryStatus = isAutoCancel ? 'autoCancel' : isRevoke ? 'revoke' : status
  return entryStatus
},
profile
FrontEnd Developer with Vue.js, TypeScript

0개의 댓글