PINIA 로드 시점 관련 문의 드려요

pinia로 구성하여 axios통하여 데이터를 가져오는 간단한 게시판을 구성을 한상태인데요.
상단 검색 영역과 하단 게시판 리스트 영역을 분리하여 부모 컴포넌트에서 두가지 컴포넌트를 불러오고 상단의 검색한 검색 조건을 로컬 스토리지에 넣어두었다. 게시판에 진입시에 로컬스토리지에 검색조건이 남아있으면 자동으로 검색 조건 통하여 axios로 데이터를 호출하여 뿌려주고 있는데요 여기서 콘솔에 보면 pinia 관련 store installed 되기 전 보다 먼저 로컬스토리지 검색조건을 가져와 axios를 호출 하려 하다 보니 실제 axios 호출관련 부분은 store에 구성되어있어서 게시판 데이터를 가져오지를 못하네요. settimeout으로 약간 시간차를 두어 store installed 이러우진 후에는 정상적으로 검색을 해서 데이터를 가져오는데요 settimeout을 사용하지 않고 처리를 할 수 있는 방법이 있을끼요?

안녕하세요, 인프런 AI 인턴입니다.
design님, Pinia 스토어가 설치되기 전에 로컬 스토리지로부터 검색 조건을 가져와 Axios 호출을 시도할 때 문제가 발생한다고 말씀해 주셨네요. 이는 Vue 인스턴스가 완전히 마운트되기 전에 스토어에 접근하려 하기 때문에 발생하는 일입니다.

setTimeout을 사용하셔서 문제를 회피하셨지만 좀 더 안정적인 해결책을 찾으시는 것 같군요. 가장 일반적인 접근 방법은 Vue의 생명주기 훅을 이용하는 것입니다. created, mounted와 같은 생명주기 훅을 사용하여 컴포넌트가 마운트 되었을 때 로직을 수행하도록 설정할 수 있습니다.

예를 들어, mounted 훅 안에서 로컬 스토리지의 검색 조건을 확인하고, 해당 조건으로 데이터를 검색하는 로직을 실행하면 됩니다. 이렇게 하면 Vue 인스턴스가 준비되고 Pinia 스토어가 설치된 후에 데이터를 요청하게 되므로, setTimeout을 사용하지 않아도 됩니다.

Vue 3에서 Pinia를 사용할 경우, setup 함수 내에서 스토어를 초기화하고 반환된 스토어를 사용하거나, onMounted와 같은 Composition API의 라이프사이클 훅을 이용하여 처리하실 수 있습니다.

아래는 onMounted를 사용하는 예시 코드입니다:

import { onMounted } from 'vue';
import { useMyStore } from '@/stores/mystore';

export default {
  setup() {
    const myStore = useMyStore();

    onMounted(() => {
      const searchConditions = localStorage.getItem('searchConditions');
      if (searchConditions) {
        myStore.fetchBoardData(searchConditions);
      }
    });

    return { /* ... */ };
  }
}

이 코드는 컴포넌트가 마운트된 후(onMounted 훅 내에서) 로컬 스토리지에서 검색 조건을 불러와 스토어의 fetchBoardData 액션을 호출하여 데이터를 검색합니다.

추가로 궁금한 점이 있으시다면, Vue 3와 Pinia 관련 문서를 참고하시거나 질문에 대한 추가적인 설명이 필요하시면, 인프런의 강의 문의하기를 통해 문의해 보세요.

인프런 커뮤니티 질문&답변