작성한 질문수 1

0

안녕하세요, 인프런 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 관련 문서를 참고하시거나 질문에 대한 추가적인 설명이 필요하시면, 인프런의 강의 문의하기를 통해 문의해 보세요.