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中
流程圖
