vuex, vue-router, pinia 등에 액세스하는 방법SSR 친화적인 방식으로 Vue 구성 요소 외부에?

vuex, vue-router, pinia 등에 액세스하는 방법SSR 친화적인 방식으로 Vue 구성 요소 외부에?

SPA에서 SSR로 앱을 마이그레이션할 가능성을 염두에 두고 SSR 친화적인 코드를 작성하려고 합니다.이러한 코드의 원칙 중 하나는 교차 요청 상태 오염을 유발할 수 있는 상태 풀 싱글톤을 피하는 것입니다.

Vuex, Vue-router, Vue-i18n 등의 인스턴스를 사용해야 할 때 문제가 발생합니다.Vue 구성 요소 외부에 있습니다.각각의 SO 답변에 대한 해결책은 다음과 같습니다.짐작하셨군요.별도의 js 파일에 상태 저장 싱글톤을 만들고 내보낸 다음 앱 전체로 가져오려면:

• Vue-router: https://stackoverflow.com/a/43562210/11208064
• Vuex: https://stackoverflow.com/a/47575742/11208064
• Vue-i18n: https://stackoverflow.com/a/66695008/11208064

간단한 예

// store.js
export default new Vuex.Store() {} // this is a singleton

// someOtherModule.js
import { store } from './store.js'

Pinia는 문서에서 이 문제를 다루었습니다.그들은 앱을 통해 피니아 인스턴스에 액세스할 것을 권장합니다.$pinia. 하지만 앱 인스턴스 자체에 액세스하는 방법은 명시되어 있지 않습니다.

또한 문제는 이러한 라이브러리에만 국한되지 않습니다.우리는 비슷한 방식으로 작동하는 우리만의 모듈을 작성합니다.

이 문제를 조사하던 중 이 기사를 접했습니다.모듈 캐시를 삭제할 것을 제안하므로 필요할 때마다 모든 코드가 다시 실행되어 새로워지고 상태 비저장 상태가 됩니다.꽤 세련된 것 같지만, 어쩌면 이것이 방법일까요?그렇지 않은 경우 권장되는 해결책은 무엇입니까?

언급URL : https://stackoverflow.com/questions/75236368/how-to-access-vuex-vue-router-pinia-etc-outside-of-vue-components-in-ssr-frie