페이지에 필요한 경우 Vuex API 호출

페이지에 필요한 경우 Vuex API 호출

나는 VueJS 프로젝트가 있고 페이지에 필요할 때 데이터를 로드해야 한다.프로필 페이지에는 사용자의 정보가 필요하고, 약속 페이지에는 사용자의 약속 데이터 등이 필요하다.

지금까지의 해결책:

RouteEnter 함수에 앞서 모든 구성 요소의 데이터를 확인하고 있다.데이터가 null이면 vuex 작업에서 데이터를 로드한다.이것은 코드가 항상 반복되기 때문에 이 문제에 대한 최악의 해결책이다.

프로필부에:

beforeRouteEnter: async (to, from, next) => {
    if(!store.state.provinces)
        await store.dispatch("getProvinces")
    next()
},

약속.부에를 하다

beforeRouteEnter: async (to, from, next) => {
    if(!store.state.provinces)
        await store.dispatch("getProvinces")
    next()
},

두 번째 전략:주(州) 대신 게터(getter)를 사용하면 될 것 같은데 게터(getter)를 사용하면 경로에 따라 데이터가 로딩된다.

관련 vue 구성 요소에서 생성된 메서드를 간단히 사용할 수 있다.자세한 내용은 이 링크를 참조하십시오. https://vuejs.org/v2/guide/instance.html#Lifecycle-Diagram

참조URL: https://stackoverflow.com/questions/64522260/vuex-api-call-if-page-need-it