0

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

现在，我的设置是这样的：

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

我想要的是：

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

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

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

id | title

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

我可以在 Vuex 中做到这一点：

id | title | vuex_id

我可以使用来自服务器的响应来查找我设置的具有 vuex_id 的任务，并使用数据库中的 id 对其进行更新。

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

4

2 回答 2

1

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

也就是说，你总是可以链接动作，如果第一个返回一个承诺说它触发了一个数据库保存，等待它保存成功获取 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，也就是说，看起来它可能是identity您问题中 Id 的一列，因此有较少的选项，其中您提到了一个带有 vuexid 的选项，另一个会列值的组合（如复合键）可能很简单${title}_${you_other_column}，除此之外，您可能还剩下选项 1。

深思熟虑

按照这些思路，我的猜测是Array<Tasks>，如果我没记错的话，你正在批量更新集合，您可能需要重新考虑其中的那一部分，因为我不知道上下文以及一次更新一行的原因。

于 2018-02-23T01:50:29.083 回答
1

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

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

于 2018-02-23T01:47:25.390 回答