vuex commit保存數(shù)據(jù)技巧

Crazy_Coder 發(fā)布于2019-08-23 12:28 / 1866人閱讀

摘要：使用時(shí)官方推薦使用才修改數(shù)據(jù)。缺點(diǎn)采用修改數(shù)據(jù)，可能會寫很多函數(shù)。會上喪失掉一部分性能。因?yàn)樾聰?shù)據(jù)需要重新配置。使用我是需要保存的數(shù)據(jù)我是需要保存的數(shù)據(jù)組件中使用如果要雙向綁定某個(gè)中的值。

使用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ù)，可能會寫很多mutations函數(shù)。

會上喪失掉一部分性能。因?yàn)樾聰?shù)據(jù)需要重新配置watcher。

優(yōu)化

傳一個(gè)字符串的path和需要修改的值,如果path="a.b.c"就換算成 state.a.b.c = "needsave", 這就達(dá)到了一個(gè)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ù)"

//組件中使用
//如果要雙向綁定某個(gè)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)格模式也不會報(bào)錯了。