vuex 單向數據流，推薦的commit 改變state數據，寫起來非常繁瑣，因為改數據可能要寫很多commit函數。

依據我的理解，單向數據流主要是為了避免數據混亂，便于調試。 說白了，就是一個數據改變了，是什么促使他改變的。

數據流向永遠都是一個方向，下游是沒有權利改變數據的，所以需要數據發放中心同一級的方法來改變數據。

單項數據流，對于react來說，的確是必要的，但對于vue來說，是那么有必要嗎？

vue采用數據依賴更新，必要的數據都采用Object.defineProperty處理。給數據賦值時，本來就會通知所有采用此數據的dom更新，不管是不是父級還是子級組建的dom。

使用vuex時 官方推薦使用commit才修改state數據。

優點

缺點

優化

對于采用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 = '我是需要保存的數據'

在組件中

//如果要雙向綁定某個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使用嚴格模式也不會報錯了。

以上就是本文的全部內容，希望對大家的學習有所幫助，也希望大家多多支持錯新站長站。