페이지 새로고침 시에도 SPA 전체에서 데이터를 유지하는 방법

페이지 새로고침 시에도 SPA 전체에서 데이터를 유지하는 방법

저는 중소 규모의 쇼핑 사이트를 가지고 있는데, 소품을 통하지 않고 모든 상품을 하나의 창고로 만들어야 합니다.모든 제품과 카테고리를 한 번에 가져오려고 합니다.

그래서 내 앱에서.상위 컴포넌트인 vue를 통해 API를 호출하고 스토어에 제품 데이터를 입력하여 웹 사이트에서 사용할 수 있도록 합니다.

Vue 라우터의 다른 컴포넌트로 이동하면 정상적으로 동작합니다.그러나 브라우저를 새로 고치거나 웹에서 같은 페이지를 다시 방문하면 제품 데이터가 사라집니다.

각 경로의 제품 데이터를 얻기 위해 더 이상 요청을 할 필요가 없기 때문에, 저는 그냥 getters에 전화하지만 페이지 새로고침 시 스토어를 유지할 수 없습니다.

vuex-substate는 vuex 저장소(또는 일부)를 로컬 스토리지 또는 쿠키에 투명하게 유지합니다.다양한 소규모 프로젝트에서 큰 문제 없이 사용하고 있습니다.다만, 대량의 데이터를 투입하는 경우, 그 확장이 어떻게 되는지는 알 수 없습니다.

시작하려면 프로젝트에 설치하고 스토어를 만들 때 플러그인으로 등록하기만 하면 됩니다.기본적으로는 전체 저장소가 로컬 저장소에 저장됩니다.

import createPersistedState from "vuex-persistedstate";

//...

const store = new Vuex.Store({
// ...
  plugins: [createPersistedState()]
});

상태를 다음 중 하나에 저장할 수 있습니다.localStorage또는 SPA를 오프라인 대응 콘텐츠를 갖춘 풀기능 PWA로 변환합니다.

어느 쪽이든 전체 제품 카탈로그를 클라이언트에 저장하지 말고 가장 많이 방문한 몇 개의 짧은 기간 동안 제품 카탈로그를 저장하는 것이 좋습니다.

언급URL : https://stackoverflow.com/questions/59441078/how-do-i-maintain-data-throughout-my-spa-even-when-page-reloads