將Vue狀態數據綁定到數據庫的「正確」方法是什麼？

目前，如果用戶導致編輯數據的操作，我會關閉API調用，然後只是對我的應用程序執行「刷新」命令，以重新下載數據庫中的所有相關數據，然後視圖相應更新。將Vue狀態數據綁定到數據庫的「正確」方法是什麼？

我是否應該直接編輯我的Vuex狀態的數據，並且有某種觀察器功能來觀察這些變化並將它們寫回數據庫？

來源

2016-11-17 daninthemix

您可以實現vuex動作，這些動作會觸發狀態更改，並在後臺保存到數據庫，因爲動作是異步的。

來源

2016-11-17 16:30:31

我不會直接在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狀態以更新您的頁面。

來源

2016-11-17 18:13:02 GuyC

這與我已經做的非常相似。考慮一下VueJS中的50個筆記本電腦列表 - 如果用戶對這20檯筆記本電腦執行批量更新，目前我發送API調用，然後在200響應中執行新的API調用以獲取列表現在還有更新的數據。不覺得特別優雅或粒度，但它保持了代碼量。只是想知道其他人在做什麼。 – daninthemix

對我來說，優雅來自諾言 - 一種個人偏好，但我覺得它們是一個驚人的補充，當涉及到複雜的鏈接時 - 避免厄運的金字塔！如果您要更改操作（updateUserName）以返回承諾，那麼可以根據您可以給予用戶的反饋來幫助您。在組件中調用動作，然後可以根據其進度設置/取消設置加載狀態。總體而言，雖然上述應該很容易遵循。 Vuex固有地增加了複雜性，但我相信你已經知道它有多有益。 – GuyC

將Vue狀態數據綁定到數據庫的「正確」方法是什麼？

回答

相關問題