資訊專欄INFORMATION COLUMN
摘要：使用時官方推薦使用才修改數(shù)據(jù)。缺點采用修改數(shù)據(jù)，可能會寫很多函數(shù)。會上喪失掉一部分性能。因為新數(shù)據(jù)需要重新配置。使用我是需要保存的數(shù)據(jù)我是需要保存的數(shù)據(jù)組件中使用如果要雙向綁定某個中的值。
使用vuex時 官方推薦使用commit才修改state數(shù)據(jù)。
優(yōu)點便于調(diào)試，當(dāng)數(shù)據(jù)變化時，可以在vuetools工具中看到是哪個函數(shù)修改了state值。
缺點采用commit修改數(shù)據(jù)，可能會寫很多mutations函數(shù)。
會上喪失掉一部分性能。因為新數(shù)據(jù)需要重新配置watcher。
優(yōu)化傳一個字符串的path和需要修改的值,如果path="a.b.c"就換算成 state.a.b.c = "needsave", 這就達(dá)到了一個commit 解決所有保存的問題。
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:"我是需要保存的數(shù)據(jù)"})
state.a.b.c = "我是需要保存的數(shù)據(jù)"
//組件中使用
//如果要雙向綁定某個vuex中的值。
//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)格模式也不會報錯了。
文章版權(quán)歸作者所有，未經(jīng)允許請勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。
轉(zhuǎn)載請注明本文地址：http://systransis.cn/yun/98564.html
先說一下Vuex到底是什么？ Vuex 是一個專門為 vue.js 應(yīng)用程序開發(fā)的狀態(tài)管理模式 這個狀態(tài)我們可以理解為在 data 中的屬性，需要共享給其他組件使用的部分 也就是說，我們需要共享的數(shù)據(jù)，可以使用 vuex 進(jìn)行統(tǒng)一集中式的管理 喜歡看代碼學(xué)習(xí)的的可直接下載下方 Demo https://gitee.com/jiangliyue/... Vuex中的五種基本對象 state...
摘要：深入學(xué)習(xí)作為配合使用的數(shù)據(jù)狀態(tài)管理庫，針對解決兄弟組件或多層級組件共享數(shù)據(jù)狀態(tài)的痛點問題來說，非常好用。至此，構(gòu)造函數(shù)部分已經(jīng)過了一遍了。 深入學(xué)習(xí)Vuex vuex作為配合vue使用的數(shù)據(jù)狀態(tài)管理庫，針對解決兄弟組件或多層級組件共享數(shù)據(jù)狀態(tài)的痛點問題來說，非常好用。本文以使用者的角度，結(jié)合源碼來學(xué)習(xí)vuex。其中也參考了許多前輩的文章,參見最后的Reference Vue加載Vuex...
摘要：深入學(xué)習(xí)作為配合使用的數(shù)據(jù)狀態(tài)管理庫，針對解決兄弟組件或多層級組件共享數(shù)據(jù)狀態(tài)的痛點問題來說，非常好用。至此，構(gòu)造函數(shù)部分已經(jīng)過了一遍了。 深入學(xué)習(xí)Vuex vuex作為配合vue使用的數(shù)據(jù)狀態(tài)管理庫，針對解決兄弟組件或多層級組件共享數(shù)據(jù)狀態(tài)的痛點問題來說，非常好用。本文以使用者的角度，結(jié)合源碼來學(xué)習(xí)vuex。其中也參考了許多前輩的文章,參見最后的Reference Vue加載Vuex...
閱讀 1021·2021-11-25 09:43
閱讀 1680·2019-08-30 13:59
閱讀 1612·2019-08-30 11:22
閱讀 2138·2019-08-30 11:06
閱讀 1308·2019-08-28 17:51
閱讀 3745·2019-08-26 12:12
閱讀 790·2019-08-26 12:11
閱讀 456·2019-08-26 12:10
