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

Question

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

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

Answer 1

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

Answer 2

我不会直接在Vuex编辑数据可能不那么准确地代表你的数据库，该数据库可以得到非常尴尬的当前状态开始......

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

因此，在编辑时会调用vue API，它将请求和数据发送到数据库端点。 vue API返回一个承诺，然后您链接更新您的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状态以更新您的页面。