데이터를 최신 상태로 유지하기 위해 Vuex를 통해 API에서 데이터를 다시 가져오는 시기

데이터를 최신 상태로 유지하기 위해 Vuex를 통해 API에서 데이터를 다시 가져오는 시기

API에서 데이터를 가져오는 중인데 Vuex를 통해 데이터를 얻고 싶다.그래서 나의 유저 스토어 모듈이 모든 유저들을 보유, 관리하고 있다.

현재 가지고 있는 모든 사용자를 가져오려면fetchAxios를 통해 API를 호출하고 사용자 어레이를 응답에서 돌연변이로 전달하는 동작.

다음 위치에 뷰 구성요소가 있음/users사용자 목록을 렌더링한다.그 구성 요소 내에서 나는 부른다.

async mounted() {
  await this.fetch();
}

저장소를 초기화하십시오.그 후에, 상점 주인은 사용자 배열을 반환하고 목록을 렌더링한다.나는 또한 getter를 통해 id로 하나의 아이템을 가져올 수 있다는 것을 알고 있다.

getById: state => id => state.users.find(user => user.id === id)

사용자 세부 정보 페이지로 이동하는 경우/users/:id사용할 수 있고, userId를 추출할 수 있다.this.$router.currentRoute.params.id사용자 세부 정보를 제공해야 한다.하지만 내가 그 경로를 직접 로드하면 어쩌지?그런 다음 빈 사용자 배열로 초기화된 저장소는 단 한 명의 사용자도 찾지 못할 것이다.

그러면 다음 시간에 모든 사용자를 다시 불러와야 함mounted사용자 세부 정보 보기의 후크?자원이 Vuex를 컴포넌트와 API 사이의 인터페이스로 사용해야 한다고 하기 때문에 악리 서비스를 직접 호출하는 것은 패턴에 어긋나는 것이라고 생각한다.

api에서 모든 사용자를 언제 가져오는 것이 가장 좋은 방법인가?선택한 구성 요소의 모든 사용자를 로드하는 다른 페이지로 이동하면 해당 사용자를 getter에서 가져와야 하는가?아마도 그것은 더 이상 존재하지 않는 사용자를 로딩할 것이다.하지만 모든 사용자를 X초마다 폴링하는 것도 나쁘겠지만...

전체 애플리케이션의 모든 구성 요소에 액세스할 수 있도록 스토어 데이터를 업데이트하는 올바른 방법은 무엇인가?

나는 Vuex가 당신이 설명한 방식으로 전체 테이블 가치의 사용자 데이터를 저장하는 데 사용되어야 한다는 것에 동의하지 않는다.이것은 나에게 보안상의 문제로 들린다.Vuex는 클라이언트 측 저장소라는 점을 기억하십시오. 즉, 애플리케이션을 사용하는 모든 클라이언트에서 모든 사용자 데이터를 볼 수 있다는 의미입니다.중요한 데이터를 클라이언트 측에 저장해서는 안 된다.

브라우저 콘솔에 이것을 입력하면 무슨 뜻인지 알 수 있을 겁니다.

document.getElementsByTagName('a')[0].__vue__.$store.state

Vuex는 세션을 구동하는 데 필요한 개별 사용자의 민감하지 않은 데이터를 저장하는 데 사용해야 한다.

만약 당신이 관리자나 다른 것에 의해 관리될 수 있도록 계정을 나열하기 위한 목적으로 모든 사용자 데이터를 저장하고 있다면, 나는 대신 당신이 당신의 사용자 계정을 나열하는 모든 보기를 로드할 때 API 호출을 요청하면 된다.이렇게 하면 API를 지속적으로 폴링할 필요 없이 항상 최신 데이터를 가질 수 있다.

처음 5개의 레코드만 로드하여 데이터를 페이지별로 분류한 다음(처음 API 호출을 가볍게 하기 위해), 관리자에게 계정을 검색할 수 있는 기능을 제공하고, 검색은 API를 통해 서버 측에서 수행해야 한다.

예:

methods: {
    fetchUsers(limit, page, search) {
        const thisIns = this;
        if (search) {
            this.userQuery = `/users/find?search=${search}`
        } else {
            this.userQuery = `/users/find?limit=${limit}&page=${page}`
        }
        thisIns.$http.get(this.userQuery)
            .then(async (response) => {
                console.log(response.data)
            })
            .catch(function (error) {
                console.log(error)
            });
    }
},
created() {
    this.fetchUsers(5, 1)
},

그러면 전화를 걸 수 있다.fetchUsers()사용자 검색을 수행할 때와 같이 필요에 따라 방법

Axios를 사용하고 있으므로, API 호출을 일정 기간 캐시할 수 있도록 캐싱 메커니즘인 Axios-cache-adapter의 구현도 고려할 수 있다.이렇게 하면 서버를 때리는 API 호출 수가 줄어들 것이다.

나 또한 이것이 확장 가능하다고 생각하지 않는다.응용 프로그램 사용자는 응용 프로그램을 처음 로드할 때 이 페이로드를 기다려야 한다는 점을 기억하십시오.이는 또한 성능에 영향을 미치며, 시간이 지남에 따라 사용자 데이터가 증가함에 따라 장치 RAM을 점점 더 많이 소비하게 될 것이다.

참조URL: https://stackoverflow.com/questions/60597768/when-to-fetch-data-from-api-via-vuex-again-to-keep-the-data-up-to-date