Vuejs에서 구성 요소를 렌더링하기 전에 데이터 가져오기

Vuejs에서 구성 요소를 렌더링하기 전에 데이터 가져오기

Vuejs를 Vuex와 함께 사용하고 있으며 데이터베이스에서 데이터를 가져오는 데 사용되는 작업이 있으므로 이 데이터에 종속된 구성 요소를 렌더링하기 전에 가져오기를 원함.그렇다면 이 행동들을 내 코드에 넣을 수 있는 곳은 어디인가?

마운트됨 / 마운트 전 생성

Vuejs 3에서는 마운트된 https://vuejs.org/api/을 참조하십시오.

마운트된 후크에서 작업(예: getData)을 사용할 수 있으며 다음 단계로 이동하기 전에 작업 호출이 완료되었는지 확인하기 위해 비동기 대기 모드를 사용할 수 있음

여기 예제가 있다. (나는 단지 데이터를 얻기 위해 어떤 방법이라도 자유롭게 사용할 수 있는 예제에 대해 공리를 사용했다.):

<template>
  <h1>My component</h1>
</template>

<script>
  import axios from 'axios'

  export default {

    name: 'MyComponent',

    setup() {
      const baseUrl = 'your-api-base-url'

      const apiClient = axios.create({
         baseURL: baseUrl,
         withCredentials: false,
         headers: {
           Accept: 'application/json',
           'Content-Type': 'application/json',
         },
      })

      const getData = async() => {
         try {
            return await apiClient.get('/api-path', {}) // here i call my 
              api to get data you can call your function
         } catch (error) {
            throw new Error(error)
         }
      }

      onMounted(() => {
        getData()
      })
    }
   }
 </script>

참조URL: https://stackoverflow.com/questions/71317275/fetch-data-before-rendering-components-in-vuejs