현재 페이지의 Vuex 레코드를 삭제할 때 네비게이션을 처리하는 방법

현재 페이지의 Vuex 레코드를 삭제할 때 네비게이션을 처리하는 방법

나는 가지고 있다ClientManagePage여기서 클라이언트 정보를 표시하고 표시된 클라이언트를 삭제할 수 있습니다.

이 페이지의 vue-router 루트 설정은 다음과 같습니다.

{
  path: '/client/:id/manage',
  name: 'client',
  component: ClientManagePage,
  props: ({ params }) => ({ id: params.id }),
}

클라이언트 엔티티는 vuex 저장소에 저장됩니다. ClientManagePage를 사용하여 스토어에서 클라이언트엔티티를 가져옵니다.id클라이언트의 다양한 속성 및 "삭제" 버튼을 표시합니다.

제거 버튼 청취자는 (내부)mapActions):

async removeClientClicked(dispatch) {
  // Wait for the action to complete before navigating to the client list
  // because otherwise the ClientListPage might fetch the client list before
  // this client is actually deleted on the backend and display it again.
  await dispatch('removeClientAction', this.id);
  this.$router.push({ name: 'clientList' });
},

클라이언트를 제거하는 vuex 작업은 다음과 같습니다.

async function removeClientAction({ commit }, id) {
  // Remove the client from the store first (optimistic removal)
  commit('removeClient', id);
  // Actually remove the client on the backend
  await api.remove('clients', id);
  // Moving "commit('removeClient', id);" here still produces the warning mentioned below
}

문제는 클라이언트를 삭제할 때 다른 경로로의 네비게이션을 어떻게 처리하느냐입니다.현재 코드는 개발 모드에서 다음과 같은 경고를 생성합니다.

[Vue warn]: Error in render: "TypeError: Cannot read property 'name' of undefined"

found in

---> <ClientManagePage> at src/pages/ClientManagePage.vue
       <Root>

이 문제는 당연히 리액티브시스템이 시작되어 삭제된 vuex 클라이언트엔티티를 사용하여 페이지 내용을 갱신하려고 하기 때문에 발생합니다.이 문제는 다음 작업 전에 발생합니다.removeClientAction따라서 [ClientList]페이지로의 네비게이션이 완료됩니다.

저는 이에 대한 몇 가지 가능한 해결책을 생각해 냈지만, 그것들은 그다지 매력적이지 않습니다.

• 한 잔 하다v-if="client"[ Client Manage Page ]의 상단에서 클라이언트가 스토어에 존재하지 않는 동안 모든 것을 숨깁니다.
• 계산된 속성 사용client[ Client Manage Page ]를 클릭하여 페이지에 필요한 속성을 포함하는 기본 "dummy" 클라이언트를 반환합니다.그러나 액션이 진행되는 동안 페이지는 여전히 "가짜" 콘텐츠로 깜박입니다.
• 디스패치 직후(또는 디스패치 전)에 "client List"로 이동합니다.removeClientAction이로 인해 액션이 완료되는 동안 clientList에 삭제된 클라이언트가 잠시 표시되며 이는 좋지 않습니다.

현재 페이지에 표시된 기본 vuex 엔티티를 삭제할 때 탐색하는 일반적인 문제에 대한 다른 해결 방법이 있습니까?

나는 결국 큰일을 하게 되었다.v-if[ Client Manage Page ]의 상단에서 클라이언트가 스토어에 존재하지 않는 동안 모든 것을 숨깁니다.예쁘지는 않지만 효과가 있어요.개선사항은 에 "기다려주세요, 작업이 진행 중입니다"를 표시하는 것입니다.v-else.

언급URL : https://stackoverflow.com/questions/56303861/how-to-handle-navigation-when-removing-the-current-pages-vuex-record