먼저 서버에서 개체를 로드하는 방법 - vuejs - vuex

먼저 서버에서 개체를 로드하는 방법 - vuejs - vuex

그래서 서버에서 몇 가지 설정을 가져오기 위해 fetch와 함께 요청을 보내고 싶습니다.응답은 페이지가 로드되기 전에 이루어져야 하며 vuex에 이러한 설정을 저장하므로 다른 모든 구성 요소에서 액세스할 수 있습니다.

요구 사항을 전송하고 데이터를 얻을 수 있었지만 컴포넌트에서 이러한 vuexed 설정을 사용할 때마다 데이터가 표시되지 않습니다.vuex는 다음과 같습니다.

const state = {
    settings: new Settings,
    is_mobile: MobileCheck(),
}

다음은 설정 요청입니다.

class Settings {
    constructor() {
        this.endpoint_url = '/api/settings/'
        this.image_file_path = ''
        this.music_sheet_file_path = ''
        this.audio_file_path = ''

        this.get_settings()
    }

    async get_settings () {
        await fetch(this.endpoint_url).then(res => res.json()).then(res => {
            this.image_file_path = res.find(setting => setting.parameter === "image_file_path").value
            this.audio_file_path = res.find(setting => setting.parameter === "audio_file_path").value
            this.music_sheet_file_path = res.find(setting => setting.parameter === "music_sheet_file_path").value
        })
        .catch(err => console.log(err));
    }

    get_image_file_path () {
        console.log(this.image_file_path)
        return this.image_file_path
    }
    get_music_sheet_file_path () {
        return this.music_sheet_file_path
    }
    get_audio_file_path () {
        return this.audio_file_path
    }
}

vue를 프런트, 라라벨을 백엔드로 사용하고 있습니다.app.js 파일에 요청을 넣을 수도 있고 더 나은 방법을 알 수도 있습니다.어떤 도움이라도 좋습니다.

@Naveen이 언급했듯이 created() 또는 create() 전이라도 좋은 선택인 것 같습니다.

다음은 Vue의 설명입니다.https://vuejs.org/v2/guide/instance.html#Instance-Lifecycle-Hooks

언급URL : https://stackoverflow.com/questions/63602892/how-to-load-an-object-from-server-before-anything-else-vuejs-vuex