Vue 앱에서 자동 복구된 사용자의 데이터를 가져오는 최적의 장소?

Vue 앱에서 자동 복구된 사용자의 데이터를 가져오는 최적의 장소?

안녕, 나는 집에 있는 내 익스프레스 API에서 게시물 배열들을 가져오고 있어.노선 경비원이 보호하는 부호

<script>
export default {
  created() {
    this.$store.dispatch('fetchPosts')
  }
}
</script>

petchPosts 작업:

async fetchPosts(context) {
  try {
    const res = await api.get('/posts', {
      headers: {
        Authorization: `Bearer ${localStorage.getItem('token')}`
      }
    })
    context.commit('SET_POSTS', res.data)
    context.commit('SET_ERROR', null)
  } catch(err) {
    console.log(err.response.data)
    context.commit('SET_ERROR', err.response.data)
  }
}

나의 행동에서 나는 게시물 객체를 res.data로 설정하는 돌연변이를 범한다.DB에 게시물을 추가하고 사용자가 게시물을 추가할 때 게시물 상태를 업데이트하는 돌연변이가 있기 때문에 사용자가 로그인할 때만 Posts를 가져오고 싶다.그러나 홈 화면으로 돌아가기 때문에 생성된 후크가 다시 실행되어 각 포스트 req에서 데이터를 다시 가져오게 된다.물론 앱은 잘 작동하지만 더 효율적일 수 있다.앱의 성능을 향상시키기 위해 어떻게 해야 할까?

주/도가 이미 채워져 있지 않은지 확인할 수 있다.
비어 있으면 API 호출하고, 그렇지 않으면 아무 것도 하지 마십시오.

경비원이 있다는 것은 좋은 일이다.앱과 자동 검색 사용자를 처리하려는 방법에 따라 라우터에 글로벌 미들웨어를 연결할 수도 있다.이것은 더 많은 일반 코드를 추가할 것이고, 따라서 오류/복제 횟수를 줄일 수 있는 여러 곳에서 사용될 수 있다.

여기에 관한 흥미로운 기사가 있다: https://markus.oberlehner.net/blog/implementing-a-simple-middleware-with-vue-router/

나머지 암호는 괜찮아 보여!

참조URL: https://stackoverflow.com/questions/68002251/best-place-to-fetch-data-for-authed-users-in-vue-app