VueJ에서 API 응답을 캐시하는 방법이 있습니까?s

VueJ에서 API 응답을 캐시하는 방법이 있습니까?s

VueJS 어플리케이션에서는 페이지가 새로고침될 때마다 호출되는 API가 거의 없습니다.이러한 API에서는 거의 변경되지 않는 응답과 거의 변경되지 않는 응답은 거의 없습니다.API 호출 응답을 캐시하여 변수에 저장하여 필요할 때마다 사용하고 페이지 새로고침 시 요청 수를 줄일 계획입니다.

vueJ는 처음이라 구현 방법을 전혀 모릅니다.VueJs나 Javascript에서 이를 달성할 수 있는 방법이 있습니까?어떤 도움이라도 주시면 감사하겠습니다.

샘플 HTML 코드,

<div class="col-sm-6">
    <span>Is User Available? {{userInfo[is_user_available]}}  </span>
    <span> User Type : {{userType}} </span>
</div>

API 호출은 다음과 같습니다.

created: function () {
    this.checkForUser();
},
methods: {
    checkForUser: function() {
        this.api.call('user_info', { username : this.username })
        .then((response) => {
            if (response) {
                this.userInfo = response;
                this.userType = this.userInfo['user_type'];
            }
        })
        .catch((error) => {
            this.userInfo.length = 0;
        })
    }
}

일반 Vuex 저장소에 데이터를 저장하는 경우 vuex-persistedstate 플러그인을 사용하지 않는 한 페이지 새로 고침 시 데이터가 손실되어 저장소 데이터가 로컬 스토리지에 저장됩니다.(다음은 작업 예시입니다)

@Mysterywood 답변에 대한 자세한 내용은 직접 로컬 스토리지에 저장할 수 있습니다.

그것을 실현하기 위해서는

입수:

const userType = window.localStorage.getItem('userInfo')

설정:

    window.localStorage.setItem('userInfo', response)

및 삭제:

    window.localStorage.removeItem('userInfo')

원하는 깊이에 따라 몇 가지 방법이 있습니다.

SPA 세션 중에 상태를 유지할 경우 다음과 같이 할 수 있습니다.

• 글로벌하게 액세스 가능한 상태/데이터를 저장하려면 Vuex를 선택하십시오.이를 통해 컴포넌트의 파괴/작성 여부에 관계없이 상태를 유지할 수 있습니다.

• 루트 수준 Vue 인스턴스에 저장합니다.Vue CLI 를 사용하고 있는 경우는, main.js 에 표시됩니다.다음과 같은 작업을 수행할 수 있습니다.

new Vue({
  // ...
  data: {
    userType: {}
  }
})

그 후, 다음의 방법으로 액세스 할 수 있습니다.this.$root.userType이것은 소규모 프로젝트에서는 괜찮지만, 일반적으로는 문제가 매우 빨리 발생할 수 있기 때문에 권장하지 않습니다.

• EventBus도 있지만, 이 역시 매우 빠르게 복잡해질 수 있습니다.Vue3에서는 EventBus도 권장되지 않습니다.

사용자가 탭/브라우저를 닫은 후에도 응답을 캐시하고 다시 액세스하려면 다음 사항을 고려해야 합니다.

1. 쿠키
2. local 스토리지
3. 서비스 워커

이것을 체크하면 도움이 됩니다.vuejs의 클라이언트 측 스토리지

클라이언트측의 스토리지는, 애플리케이션의 퍼포먼스를 신속히 향상시키는 뛰어난 방법입니다.브라우저 자체에 데이터를 저장함으로써 사용자가 필요할 때마다 서버에서 정보 가져오기를 건너뛸 수 있습니다.오프라인에서 특히 유용하지만, 온라인 사용자도 리모트 서버보다 로컬에서 데이터를 사용하는 것이 유리합니다.클라이언트 측 스토리지는 쿠키, 로컬 스토리지(기술적으로는 "Web 스토리지"), IndexedDB 및 WebSQL(새로운 프로젝트에서 사용되지 않는 방법)을 사용하여 수행할 수 있습니다.

언급URL : https://stackoverflow.com/questions/64927825/is-there-any-way-to-cache-the-api-response-in-vuejs