vue.js - 将 Vue 状态数据绑定到数据库的“正确”方法是什么？

Question

目前，如果用户执行编辑数据的操作，我会发送 API 调用，然后对我的应用程序有效地执行“刷新”命令，从数据库中重新下载所有相关数据，并相应地更新视图.

我是否应该直接在我的 Vuex 状态下编辑数据，并拥有某种观察器功能来观察这些变化并将它们写回数据库？

Answer 1

我不会从直接在 Vuex 中编辑数据开始，因为这可能无法准确表示数据库的当前状态，这可能会变得非常尴尬......

相反，我会在您的应用程序中创建一个 API 模块，该模块返回一个 Promise，它对您的数据库进行所需的更新。然后在来自数据库 API 的成功/错误响应中，您解决/拒绝 Promise。成功后，解析回调可以传递更新的数据。

因此，在编辑时调用 vue API，它将请求和数据发送到您的数据库端点。vue API 返回一个 Promise，然后你链接它来更新你的 Vuex 状态。成功时您会收到一个包含更新数据的对象，错误时您会收到消息并在需要时提醒用户，即

# Your Vue API
setUserName: (username) => new Promise((resolve, reject) => {

  // send request to your database, assuming via vue resource
  Vue.http.post('www.endpoint.com', { name: username })
    .then(responseData => resolve(responseData.name))
    .catch(errorData => reject(errorData))

}

# Your Vuex Action
updateUserName: ({ commit }) => {

  YourVueAPI.setUserName('joe')
    .then(name => commit('SET_USERNAME', name))
    .catch(errorData => alert(errorData.message))

}

# Your Vuex Mutation
SET_USERNAME: (state, name) {

  state.username = name

}

类似上面的内容将允许您仅在数据库中正确设置更新的用户名时显示更新的用户名。因此确保用户始终了解数据库的正确状态。

然后，Vue 将允许您轻松地做出反应/观察 Vuex 状态以更新您的页面。

Answer 2

您可以实现 vuex 操作，这些操作将触发状态更改以及在后台保存到数据库，因为操作是异步的。