1. 程式人生 > >簡述對vuex的理解

簡述對vuex的理解

1.vuex是什麼?     vuex是vue框架的狀態管理器。   2.如何使用?     在main.js中引入store;新建store,引入state,const,getters,mutations,actions;   3.使用他的功能場景?     單頁應用,元件之間的狀態,音樂播放,登入狀態,加入購物車,定位   4.不用Vuex會帶來的問題     可維護性下降,若是修改資料就要維護三個地方;     可讀性下降,因為一個元件裡的資料根本看不出來是從哪裡來的;     增加耦合,大量的上傳派發會讓耦合性大大增加;   5.vuex的屬性     有五種屬性,State,Getter,Mutation,Action,Module。     (1)State特性:             儲存資料,儲存狀態。將vuex比作一個倉庫,倉庫裡面存放許多物件。而state就是資料來源的存放地,對應vue裡面的data。             state裡面存放的資料是響應式的,Vue元件從store中讀取資料,若是store中的資料發生改變,依賴這個資料的元件也會發生更新。             通過mapState把全域性的state和getters對映到當前元件的computed計算屬性中。     (2)getter特性:             對state進行計算操作,他就是store的計算屬性。防止多次計算降低效能。             可以在多組間之間複用。若是一個狀態只在一個元件內使用就可以不用getters。     (3)Mutation特性:             被action呼叫。功能非常單一:只是改變state資料和狀態。     (4)Action特性:             處理非同步程式。  (5)Module模組:     vuex允許將store分成若干模組,每個模組都可以包含以上四種屬性。若呼叫一個變數,但是不同的模組都有的一個同名的變數,這是呼叫時就會出問題。解決:在模組中新增名稱空間:namespaced:true;呼叫時採用物件的形式呼叫 某個模組的某個變數就可以了。例如:...Vuex.mapState({a:state=>state.homeStore.a}) ; ...mapActions({fn:"homeStore/fn"})       6.資料流動                7.輔助函式     屬性: mapState , mapGetters    在computed中     方法: mapMutations , mapActions  在methods中                                                                                 流程圖