Vuex狀態管理模式


根據官網,vuex是一個專為vue.js應用程序開發的狀態管理模式。

Vuex狀態管理模式有5種,分別為:State、 Getter、Mutations 、Action、 Module。

只用來讀取的狀態集中放在store中; 改變狀態的方式是提交mutations,這是個同步的事物; 異步邏輯應該封裝在action中。

場景有:單頁應用中,組件之間的狀態、音樂播放、登錄狀態、加入購物車。

State: 該屬性用來存儲數據和存儲狀態。它的返回值會根據它的依賴被緩存起來,且只有當它的依賴值發生了改變,才會被被重新計算。

Getter:該屬性類似於vue.js的計算屬性。可以對State進行計算操作,雖然組件內也可以進行計算操作,但是Getter可以在多組件之間復用,而且Getter的返回值會根據它的依賴被緩存起來,只有Getter中的依賴值(state中的某個需要派生狀態的值)發生改變的時候才會被重新計算。

Mutations:該屬性用來更改state 的狀態。每個mutation都有一個字符串類型的事件類型和一個回調函數,在函數中改變state的值。執行這個函數,需要執行一個相應的調用方法:store.commit。

Action : 該屬性用來提交mutations,在action中可以執行store.commit,action沒有異步操作。在頁面中使用這個action,可以執行store.dispatch。

Module : 該屬性可以將store分割程不同的模塊。每個模塊有自己的state,mutations,action,getters。使結構變得更加清晰,方便管理。

const store = new Vuex.Store({ //store實例
      state: {
         count: 0
             },
      mutations: {                
         increment (state) {
          state.count++
         }
          },
      actions: { 
         increment (context) {
          context.commit('increment')
   }
 }
})

用Vuex的好處:

1、可以做狀態管理,數據更新可以驅動視圖更新;

2、可以當成一個內存數據庫用,像H5 的Cookie,localStaorage之類的。但是Vuex在刷新后會自己銷毀,而H5的那些本地存儲則還會在瀏覽器中。

不用Vuex不好的地方:

1、可維護性降低;

2、可讀性下降;

3、增加耦合,大量的上傳派發,會讓耦合性大大的增加。

 


注意!

本站转载的文章为个人学习借鉴使用,本站对版权不负任何法律责任。如果侵犯了您的隐私权益,请联系我们删除。



 
粤ICP备14056181号  © 2014-2021 ITdaan.com