작업 전 VueJS 프로세스 완료 템플릿

작업 전 VueJS 프로세스 완료 템플릿

좋은 오후입니다.

저는 지금 재미있는 문제가 있어요.서드파티제 서버는 정적 html 콘텐츠에 대한 번역을 제공하고 있습니다.Ajax를 통해 이 콘텐츠를 가져와 Vue 구성 요소에 표시해야 합니다.

이러한 번역은 사전과 같은 데이터 구조(카테고리 및 키)를 통해 가져옵니다.Vue 플러그인은 Vue의 기능을 .t 이렇게요.

<template>
    <section>
        <h1>{{ t('CommonHeaders', 'HomePage') }}</h1>
        <p v-html="t('Articles', 'SiteDescription')"></p>
    </section>
</template>

현재 이러한 번역은 HTML에 삽입하여 브라우저로 출하되며, 그 후 클라이언트 측 수화 메커니즘이 그것들을 읽어 Vuex 스토어에 추가합니다.t그런 다음 함수를 사용하여 변환을 검색하여 필요에 따라 표시합니다.이러한 변환은 반응적이며 데이터 파라미터를 받아들여 변환을 포맷합니다.

Vue SFC를 사용하여 SPA와 같은 방식으로 사용자 플로우를 렌더링합니다.단, 사이트는 아직 SPA가 아닙니다.

이렇게 하려면 페이지에 필요한 번역이 백엔드 컨트롤러 방식으로 사전에 나열되어 있어야 합니다.
이는 유지관리할 수 없게 되어 필요한 것보다 훨씬 더 많은 데이터가 프런트 엔드로 전송됩니다.또한 백엔드 시스템에는 HTML에 번역을 추가하기 위해 접속할 수 있는 페이지가 작성될 때 최종 엔드 포인트가 없습니다.또한 콘텐츠가 복제되는 경우도 많습니다.
백엔드 시스템은 DotNet MVC 4를 사용하여 구축되었기 때문에 현재로서는 SSR 기능이 없습니다.

방법 (
코드를 더 잘 유지하기 위해 vue 엔진이 템플릿을 렌더링하기 전에(즉, beforeCreate 또는 created 훅을 통해) AJAX 호출을 통해 변환을 로드하기 위해 플러그인에서 't' 함수를 사용하고 싶습니다.문제는 AJAX 콜을 기동하기 전에 Vue 인스턴스가 하위 컴포넌트 템플릿에 필요한 변환에 대해 알고 있어야 한다는 것입니다.또, 그 방법을 알 수 없습니다.

한편, 이렇게 렌더링을 연기하는 것은 제 본능에 어긋나는 일이지만, 현시점에서는 선택의 여지가 없는 것 같습니다.
번역 클라이언트 측을 갱신할 경우에 대비하여 콘텐츠해시를 사용하여 캐시할 예정입니다.따라서 Ajax 콜은 그다지 자주 필요하지 않고 첫 번째 로드 시에만 필요합니다.
사이트는 점차 SPA로 변환되고 있습니다.이 시점에서 노드를 통해 FE를 분할하고 SSR를 이용할 수 있습니다.그 시점까지는 이것이 내가 생각해 낼 수 있는 최선의 생각이었지만.

어떤 도움이라도 주시면 대단히 감사하겠습니다.

저도 생각해 보았습니다.어플리케이션 Init의 클라이언트에 캐시된 json 전체를 로딩화면으로 보내는 순간은 번역할 것이 많지 않기 때문에 나쁘지 않지만, 그 외에는 다음과 같은 접근방식을 생각하고 있었습니다.

에 vuex에 한 키 .translate(미국의)

t()를 translate아직 번역된 스토어에 없는 경우 변환을 다시 사용할 수 있을 때까지 빈 문자열 또는 플레이스 홀더를 반환합니다.

온에 mountedfetch하고 Ajax를 translate리스트 합니다.

되었을 때 Vue의 VUEX를 시킵니다.t()을 반환한다.nextTickplaceholder이전에 반환된 값입니다.

언급URL : https://stackoverflow.com/questions/60266130/vuejs-process-complete-template-before-operations