programing

Vuex 조건부(Lazy-loading) 스토어

itsource 2022. 7. 26. 23:27
반응형

Vuex 조건부(Lazy-loading) 스토어

Vue.js에 SPA를 구축하여 기록된 사용자의 문서와 대시보드를 관리하고 있습니다.다음과 같은 문제에 직면해 있습니다.

  • 여러 모듈이 포함된 하나의 vuex 스토어가 있으며 다양한 작업을 관리합니다.
  • 이러한 모듈 중 일부는 관리용입니다(새 대시보드 추가, 대시보드 편집...).여러 가지)가 있습니다.
  • 최종 사용자 중 극히 일부만 관리 영역에 액세스할 수 있으므로 admins vuex 모듈을 사용합니다.

모든 사용자에 대해 관리 스토어와 상태를 갖는 것은 그다지 최적화되지 않은 것 같습니다.따라서 다음과 같은 질문입니다.Vuex 스토어에 모듈을 추가할 수 있는 아키텍처 방법은 조건(예를 들어 사용자가 관리자일 경우)에만 있습니까?사용자가 관리 인터페이스에 액세스 할 때만 이 스토어를 로드하는 게으른 로딩 같은 거?

EDIT : 비동기 API 호출을 통해 누가 관리자인지 판별합니다.따라서 솔루션(존재하는 경우)은 스토어 구조를 동적으로 변경할 수 있어야 합니다.2개의 vue 인스턴스를 생성하는 회피책은 피하고 싶습니다.이것은 많은 솔루션에서 흔히 볼 수 있는 문제라고 생각합니다(일반 사용자에게는 있어서는 안 되는 관리 목적으로 큰 스토어를 가지고 있습니다).

개별 변수를 저장하고 조건에 따라 특정 모듈을 추가할 수 있습니다.

import normalModule from './normalModule';
import admin from './admin';

const modules = {
    normalModule
}

if (isAdmin) modules['admin'] = admin;

export default new Vuex.Store({
    modules,
});

그들이 관리자인지 아닌지는 당신이 판단할 수 있습니다.

언급URL : https://stackoverflow.com/questions/64371535/vuex-conditional-lazy-loading-store

반응형