Как обрабатывать навигацию при удалении записи Vuex текущей страницы? - PullRequest
Новая
       6

Как обрабатывать навигацию при удалении записи Vuex текущей страницы?

2 голосов
/ 25 мая 2019

У меня есть 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" в верхней части ClientManagePage, которая скрывает все, пока клиент не существует в хранилище.
  • Используйте вычисляемое свойство client в ClientManagePage, чтобы возвратить «фиктивного» клиента по умолчанию, который содержитнеобходимые свойства для страницы.Хотя страница все еще будет мигать с «поддельным» контентом, пока действие продолжается.
  • Перейдите к «clientList» сразу после (или даже до) отправки removeClientAction.Это приводит к тому, что clientList кратко отображает удаленного клиента, пока действие завершается, что не очень хорошо.

Существуют ли другие решения этой, казалось бы, распространенной проблемы перехода при удалении базовой сущности vuex, отображаемой в текущейстраница

...