Question

目前，如果用户导致编辑数据的操作，我会关闭API调用，然后有效地对我的应用程序执行“刷新”命令，从数据库重新下载所有相关数据，相应地查看更新。

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

Answer 1

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

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

因此，在编辑时调用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操作，这些操作将触发状态更改，同时在后台保存到数据库，因为操作是异步的。

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

2 个答案: