Question

我在vuex中有一个任务列表。我在组件中有一个按钮，可以添加任务。我还有一个后端服务器，可以将任务存储在数据库中。

现在，我把它设置成这样：

Button->Ajax->Backend Response->Update Vuex->Vue Updates Frontend

我想要的是：

Button->Update Vuex->Ajax/Vue each do their thing.

我遇到的问题是，在DB创建项目之前，我没有该项目的ID。我可以在本地创建一个临时ID，并将其作为临时ID发送到服务器，但这看起来很混乱。我不会存储它，我会在vuex中使用它来从服务器返回时更新对象。

例如，假设数据库表任务如下所示：

id | title

我怎么知道服务器的响应对应于我刚推入Vuex的对象？我无法通过标题进行查找，因为它不是唯一的。我无法通过id == null进行查找，因为在从服务器获得响应之前，我可能会创建多个任务。

我可以在Vuex中执行此操作：

id | title | vuex_id

我可以使用服务器的响应来查找我设置的vuex_id的任务，并使用数据库中的id更新它。

感觉应该有一种更清洁的方式让前端立即做出反应。

Answer 1

您的第一种方法是默认方法（对我来说是正确方法），转到服务器并返回（如果已成功保存）ID，将其添加到任务对象并更新商店。

你的第二种方法不适合（也适合我），如果保存失败怎么办？你已经在商店上有任务并更新了UI，然后应该删除任务或实现一些重试请求方法，以维护UI中的任务。如果您熟悉代码，那么测试和调试将更加困难，也更难理解。

Answer 2

Button->Update Vuex->Ajax/Vue是可能的，因此我们有Actions执行异步操作的原因。

也就是说，你可以随时链接动作，如果第一个返回一个声明，说它触发一个db保存，等待它保存成功获取id然后触发后续动作，如果失败你可能想要处理它与重试和/或任何适当的东西，

actions: {
 saveInDb ({ commit }) {
   return new Promise((resolve, reject) => {
    // set time out below is your call to save into your Db
    setTimeout(() => {
    // save in db
      resolve(yourId)
    }, 1000)
  })
},
updateEverythingElse ({ dispatch, commit }) {
 return dispatch('SaveInDb').then((myNewId) => {
  commit('mutationToSaveId')
 }).catch((e) => {})
 }
}

我可能没有完全捕捉到你所说的所有内容，但只是简单地了解了我可以做的是如何完成的。

根据已修改的问题

这就是guids存在的原因，因此ID中的前端/客户端发送，看起来可能是您的问题中Id的identity列，所以有较小的你用vuexid提到的选项，另一个是列值的组合，如复合键可以简单${title}_${you_other_column}，除此之外你可能还有选项1你做的。

深思熟虑

沿着这些方向，我的猜测是，你正在进行Array<Tasks>的批量更新，如果没有记错的话，所以我没有看到你的Vuex突变的原因是每行（每个任务对象）并且它需要是整个集合，您可能需要重新考虑它的那一部分，因为我不知道上下文和一次更新一行背后的原因。

Vuejs ajax调用顺序：我可以在ajax之前在vuex中创建新的列表项吗？

2 个答案: