[vue3] 글 수정 페이지 구현하기 (computed() 사용)

등록.vue 페이지 

//🎈 1. 수정용으로 데이터를 받는 변수 선언
const dietDataPut = route.query // 여기서 라우팅하며 보낸 수정용 데이터를 받는다.

//🎈 2. 사용자가 input박스에 숫자를 입력할 때, testFlag 에 따라서 수정인지, 등록인지 if 분기문을 탄다.
async function changeDietData() {
  console.log('testFlag🧧', testFlag.value)
  console.log('dietDataPut :::: ', dietDataPut)

  // 등록 시 필요한 object 만들기
  if (testFlag.value === 'CREATE') {
    console.log('selectedFoodInfo를 잘 받아오나 보자~~~~~등록시🍀🍀🍀🍀', selectedFoodInfo.value)
    console.log('intakeGram 얼마나 먹었나요????~~~~~등록시🍀🍀🍀🍀', intakeGram.value)
    console.log('등록을 시작한다 👍')
    dietDataForPost = {
      patientId: 108, // todo 하드코딩 수정 필요
      foodName: selectedFoodInfo.value?.DESC_KOR,
      calorie: intakeGram.value * (Number(selectedFoodInfo.value?.NUTR_CONT1) / 100),
      weightInGrams: Number(intakeGram.value),
      servingWt: Number(selectedFoodInfo.value?.SERVING_WT),
      carbohydrates: Math.round(intakeGram.value * (Number(selectedFoodInfo.value?.NUTR_CONT2) / 100)),
      protein: Math.round(intakeGram.value * (Number(selectedFoodInfo.value?.NUTR_CONT3) / 100)),
      fat: Math.round(intakeGram.value * (Number(selectedFoodInfo.value?.NUTR_CONT4) / 100)),
      sugar: Math.round(intakeGram.value * (Number(selectedFoodInfo.value?.NUTR_CONT5) / 100)),
      sodium: Math.round(intakeGram.value * (Number(selectedFoodInfo.value?.NUTR_CONT6) / 100)),
      foodInfoDto: selectedFoodInfo.value
    } as DietModel
  } else {
    console.log('수정을 시작한다 👍')
    await fetchDetailFoodInfo(selectedFood?.value?.idx as number)
  }

  console.log('dietDataForPost로 이제 데이터 post 할 준비~~~~~!!!', dietDataForPost)
}


/** 🎈 3.  식이 데이터를 저장 or 수정하는 함수 */
async function addDietData() {
  let response
  if (!dietDataForPost) return

  // 수정용 데이터가 없으면(일반등록) post, 수정용데이터가 있으면(수정) update 함수 실행
  if (!dietDataPut.foodName) {
    response = await addDiet(dietDataForPost as DietModel)
    console.log('👏👏👏👏👏 식이 POST 함수 실행')
  } else {
    response = await updateDietList(dietDataForPost as DietModel)
    console.log('👏👏👏👏👏 식이 UPDATE 함수 실행')
  }

  if (response.code !== RETURN_CODE.SUCCESS) {
    console.log('정보를 가져오는 중 오류가 발생했습니다.')
    return
  }

  tokenError(response.code)

  router.replace(`/homeCare/diet/dashboard`)
  console.log('response 등록/수정까지 완료 !!!!!', response)
}


//🎈 4. 🎯 항상 감시하는 함수인 computed함수를 사용하여, 수정인지 등록인지 구분해준다.
// dietDataPut.idx가 있으면 수정으로, 아니면 등록.
// (원래는 'dietDataPut'이 있으면 => 이렇게 했는데, 빈객체로 항상 있어서 그냥 idx까지 확인해준것..

const testFlag = computed(() => {
  return dietDataPut.idx ? 'MODIFY' : 'CREATE'
})
</script>

 

 

요약

computed()로 항상 감시하는 함수를 만들어서, 해당 변수가 있으면 → 수정, 아니면 등록 ! 이런식으로 판별하자.