vuex commit保存數據技巧

Crazy_Coder 發布于2019-08-23 12:28 / 1863人閱讀

摘要：使用時官方推薦使用才修改數據。缺點采用修改數據，可能會寫很多函數。會上喪失掉一部分性能。因為新數據需要重新配置。使用我是需要保存的數據我是需要保存的數據組件中使用如果要雙向綁定某個中的值。

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

優點

便于調試，當數據變化時，可以在vuetools工具中看到是哪個函數修改了state值。

缺點

采用commit修改數據，可能會寫很多mutations函數。

會上喪失掉一部分性能。因為新數據需要重新配置watcher。

優化

傳一個字符串的path和需要修改的值,如果path="a.b.c"就換算成 state.a.b.c = "needsave", 這就達到了一個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:"我是需要保存的數據"})
state.a.b.c = "我是需要保存的數據"

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

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://specialneedsforspecialkids.com/yun/98564.html

Vuex 入門到進階

先說一下Vuex到底是什么？ Vuex 是一個專門為 vue.js 應用程序開發的狀態管理模式這個狀態我們可以理解為在 data 中的屬性，需要共享給其他組件使用的部分也就是說，我們需要共享的數據，可以使用 vuex 進行統一集中式的管理喜歡看代碼學習的的可直接下載下方 Demo https://gitee.com/jiangliyue/... Vuex中的五種基本對象 state...

mylxsw 2019-08-23 18:30 評論0 收藏0
深入學習Vuex

摘要：深入學習作為配合使用的數據狀態管理庫，針對解決兄弟組件或多層級組件共享數據狀態的痛點問題來說，非常好用。至此，構造函數部分已經過了一遍了。深入學習Vuex vuex作為配合vue使用的數據狀態管理庫，針對解決兄弟組件或多層級組件共享數據狀態的痛點問題來說，非常好用。本文以使用者的角度，結合源碼來學習vuex。其中也參考了許多前輩的文章,參見最后的Reference Vue加載Vuex...

codercao 2019-08-22 18:28 評論0 收藏0
深入學習Vuex

摘要：深入學習作為配合使用的數據狀態管理庫，針對解決兄弟組件或多層級組件共享數據狀態的痛點問題來說，非常好用。至此，構造函數部分已經過了一遍了。深入學習Vuex vuex作為配合vue使用的數據狀態管理庫，針對解決兄弟組件或多層級組件共享數據狀態的痛點問題來說，非常好用。本文以使用者的角度，結合源碼來學習vuex。其中也參考了許多前輩的文章,參見最后的Reference Vue加載Vuex...

funnyZhang 2019-08-02 10:50 評論0 收藏0
Vuex 小tip

vuex基本使用和相關規范 dispatch提交action,commit提交mutation。dispatch是異步，commit 是同步通過使用,import和mapActions 可以獲取action的方法并且能夠直接調用或重命名調用只允許通過mutation 來變更state的狀態（內容）官方Action介紹 action介紹 import { mapAc...

HelKyle 2019-08-22 13:55 評論0 收藏0