[vue3] computed 함수의 재발견 : 비동기store호출 & computed함수 호출

Edward Hyun·2022년 1월 3일
0

app&web-dev

목록 보기
53/178
post-custom-banner

composition api의 setup 함수 안에서
reactive로 선언해서 store의 비동기 데이터를 받으면 시간 차에 의해 null 값이 생기면 에러들이 발생한다.
이것을 computed 함수로 store를 호출하면 자동으로 처리된다.
그러면 앞에서 선안한 computed 함수를 setup에서 다시 사용하고 싶을 때는 어떻게 할까?
그 때는 ref()처럼 .value를 붙여서 값을 호출한다.

const myPlayer = computed(() => store.state.myInfo.room.playerList.find((player:iPlayer) => player.todTaId === tableId));

const insertMsg = (msg:string) => {
      if (myPlayer.value) {
        chatList.value.push(`[ ${myPlayer.value.playerName} ] ${msg}`);
        isChatting.value = true;
      }
    };

이상에서 볼 때
computed 선언은 자동으로 ref 특성이 부여되는 것을 확인할 수 있다.

profile
앱&웹개발(flutter, vuejs, typescript, react), 인공지능(nlp, asr, rl), 백엔드(nodejs, flask, golang, grpc, webrtc, aws, msa, nft, spring cloud, nest.js), 함수형 프로그래밍(scala, erlang)을 공부하며 정리합니다.
post-custom-banner

0개의 댓글