這篇文章主要介紹了詳解vuex commit保存數據技巧,寫的十分的全面細緻,具有一定的參考價值,對此有需要的朋友可以參考學習下。如有不足之處,歡迎批評指正。
vuex 單向數據流,推薦的commit 改變state數據,寫起來非常繁瑣,因爲改數據可能要寫很多commit函數。
依據我的理解,單向數據流主要是爲了避免數據混亂,便於調試。 說白了,就是一個數據改變了,是什麼促使他改變的。
數據流向永遠都是一個方向,下游是沒有權利改變數據的,所以需要數據發放中心同一級的方法來改變數據。
單項數據流,對於react來說,的確是必要的,但對於vue來說,是那麼有必要嗎?
vue採用數據依賴更新,必要的數據都採用Object.defineProperty處理。給數據賦值時,本來就會通知所有采用此數據的dom更新,不管是不是父級還是子級組建的dom。
使用vuex時 官方推薦使用commit才修改state數據。
優點
便於調試,當數據變化時,可以在vuetools工具中看到是哪個函數修改了state值。
缺點
採用commit修改數據,可能會寫很多mutations函數。
會上喪失掉一部分性能。因爲新數據需要重新配置watcher。
優化
對於採用commit保存state數據的,可以採用如下方式:
傳一個字符串的path和需要修改的值,如果path='a.b.c'就換算成 state.a.b.c = 'needsave', 這就達到了一個commit 解決所有保存的問題。
// mutations中的函數
save(state, { path, data }) {
if (!path ) {
throw new Error('need path')
}
const keyPath = path.split('.')
let needSave = state
for (let i = 0; i < keyPath.length - 1; i++) {
needSave = needSave[keyPath[i]]
if(!needSave) {
throw new Error(`error path: ${keyPath[i]}`)
}
}
needSave[keyPath[keyPath.length - 1]] = data
},
// 使用
vuex.commit('save', {path:'a.b.c', data:val})
// 結果
state.a.b.c = '我是需要保存的數據'
//歡迎加入前端全棧開發交流圈一起吹水聊天學習交流:619586920
在組件中
//如果要雙向綁定某個vuex中的值。
<input v-model="c">
//script
computed: {
c: {
get(){
return vuex.state.a.b.c
},
set(val) {
vuex.commit('save', {path:'a.b.c', data:val})
}
}
}
// 這樣就做到了在組件中雙向綁定,並且使用commit改變state中的值,vuex使用嚴格模式也不會報錯了。
//歡迎加入前端全棧開發交流圈一起吹水聊天學習交流:619586920
結語
感謝您的觀看,如有不足之處,歡迎批評指正。
獲取資料
本次給大家推薦一個免費的學習羣,裏面概括移動應用網站開發,css,html,webpack,vue node angular以及面試資源等。
對web開發技術感興趣的同學,歡迎加入Q羣:619586920,不管你是小白還是大牛我都歡迎,還有大牛整理的一套高效率學習路線和教程與您免費分享,同時每天更新視頻資料。
最後,祝大家早日學有所成,拿到滿意offer,快速升職加薪,走上人生巔峯。