Question

我有一个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 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页面。

我已经提出了一些可能的解决方案，但是它们并不是很吸引人：

在ClientManagePage顶部有一个v-if="client"，用于隐藏商店中不存在该客户端时的所有内容。
使用ClientManagePage中的计算属性client返回默认的“虚拟”客户端，该客户端包含页面所需的属性。动作进行期间，页面仍会闪烁并显示“伪造”内容。
在分派removeClientAction之后（或什至之前）导航到“ clientList”。这将导致clientList在操作完成时短暂显示已删除的客户端，这是不好的。

在删除当前页面上显示的底层vuex实体时，是否有其他解决方案可以解决这个看似常见的问题？

Answer 1

我最终在ClientManagePage的顶部做了一个大v-if，它隐藏了商店中不存在该客户端时的所有内容。它不漂亮，但是可以用。一项改进可能是在v-else中显示“请稍候，正在进行操作”。

删除当前页面的Vuex记录时如何处理导航？

1 个答案: