詳解vuex commit保存數(shù)據(jù)技巧
vuex 單向數(shù)據(jù)流，推薦的commit 改變state數(shù)據(jù)，寫起來非常繁瑣，因?yàn)楦臄?shù)據(jù)可能要寫很多commit函數(shù)。
依據(jù)我的理解，單向數(shù)據(jù)流主要是為了避免數(shù)據(jù)混亂，便于調(diào)試。 說白了，就是一個(gè)數(shù)據(jù)改變了，是什么促使他改變的。
數(shù)據(jù)流向永遠(yuǎn)都是一個(gè)方向，下游是沒有權(quán)利改變數(shù)據(jù)的，所以需要數(shù)據(jù)發(fā)放中心同一級(jí)的方法來改變數(shù)據(jù)。
單項(xiàng)數(shù)據(jù)流，對(duì)于react來說，的確是必要的，但對(duì)于vue來說，是那么有必要嗎？
vue采用數(shù)據(jù)依賴更新，必要的數(shù)據(jù)都采用Object.defineProperty處理。給數(shù)據(jù)賦值時(shí)，本來就會(huì)通知所有采用此數(shù)據(jù)的dom更新，不管是不是父級(jí)還是子級(jí)組建的dom。
使用vuex時(shí) 官方推薦使用commit才修改state數(shù)據(jù)。
優(yōu)點(diǎn)
- 便于調(diào)試，當(dāng)數(shù)據(jù)變化時(shí)，可以在vuetools工具中看到是哪個(gè)函數(shù)修改了state值。
缺點(diǎn)
- 采用commit修改數(shù)據(jù)，可能會(huì)寫很多mutations函數(shù)。
- 會(huì)上喪失掉一部分性能。因?yàn)樾聰?shù)據(jù)需要重新配置watcher。
優(yōu)化
對(duì)于采用commit保存state數(shù)據(jù)的，可以采用如下方式：
傳一個(gè)字符串的path和需要修改的值,如果path='a.b.c'就換算成 state.a.b.c = 'needsave', 這就達(dá)到了一個(gè)commit 解決所有保存的問題。
// mutations中的函數(shù)
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})
// 結(jié)果
state.a.b.c = '我是需要保存的數(shù)據(jù)'
在組件中
//如果要雙向綁定某個(gè)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使用嚴(yán)格模式也不會(huì)報(bào)錯(cuò)了。
以上就是本文的全部內(nèi)容，希望對(duì)大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。
相關(guān)文章
vuejs動(dòng)態(tài)組件給子組件傳遞數(shù)據(jù)的方法詳解
這篇文章主要介紹了vuejs動(dòng)態(tài)組件給子組件傳遞數(shù)據(jù)的方法詳解的相關(guān)資料,需要的朋友可以參考下2016-09-09
Vue實(shí)現(xiàn)動(dòng)態(tài)路由的示例詳解
這篇文章主要為大家詳細(xì)介紹了Vue實(shí)現(xiàn)動(dòng)態(tài)路由的相關(guān)知識(shí),主要涉及到兩個(gè)方面：一是路由的動(dòng)態(tài)添加,二是基于路由的參數(shù)變化來動(dòng)態(tài)渲染組件,下面就跟隨小編一起深入學(xué)習(xí)一下動(dòng)態(tài)路由的實(shí)現(xiàn)吧2024-02-02
解決ant design vue 表格a-table二次封裝,slots渲染的問題
這篇文章主要介紹了解決ant design vue 表格a-table二次封裝,slots渲染的問題，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過來看看吧2020-10-10
這篇文章主要介紹了vue cli4.0 如何配置環(huán)境變量，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2022-03-03
Element框架el-tab點(diǎn)擊標(biāo)簽頁時(shí)再渲染問題的解決
本文主要介紹了Element框架el-tab點(diǎn)擊標(biāo)簽頁時(shí)再渲染問題的解決，文中通過示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2022-04-04
這篇文章主要介紹了讓Vue響應(yīng)Map或Set的變化操作，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過來看看吧2020-11-11
前端開發(fā)需要經(jīng)常使用ECharts圖表渲染數(shù)據(jù)信息，在一個(gè)項(xiàng)目中我們經(jīng)常需要使用多個(gè)圖表，選擇封裝ECharts組件復(fù)用的方式可以減少代碼量，增加開發(fā)效率。感興趣的可以閱讀一下本文2023-04-04
vue截圖轉(zhuǎn)base64轉(zhuǎn)文件File異步獲取方式
這篇文章主要介紹了vue截圖轉(zhuǎn)base64轉(zhuǎn)文件File異步獲取方式,具有很好的參考價(jià)值,希望對(duì)大家有所幫助,如有錯(cuò)誤或未考慮完全的地方,望不吝賜教2024-03-03
vue報(bào)錯(cuò)Failed to execute 'appendChild&apos
這篇文章主要為大家介紹了vue報(bào)錯(cuò)Failed to execute 'appendChild' on 'Node'解決方法詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪2022-11-11
vue中的get方法\post方法如何實(shí)現(xiàn)傳遞數(shù)組參數(shù)
這篇文章主要介紹了vue中的get方法\post方法如何實(shí)現(xiàn)傳遞數(shù)組參數(shù)，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2022-04-04