1.什么是Vuex:
Vuex是一個專為Vue.js應用程序開發的狀態管理模式。
2.使用Vuex的原因:
當我們遇到多個組件共享狀態時,多層組件的傳值非常繁瑣,不利於維護,因此我們把組件的共享狀態抽取出來,以一個單例模式管理,在這種模式下,不管在哪個組件都可以獲取狀態或觸發行為
3.什么情況下使用:
<1>雖然Vuex可以幫助我們管理共享狀態,但是也附帶了更多的概念和框架,增加了學習成本,所以決定是否要使用Vuex要對短期和長期效益進行權衡。
<2>如果應用夠簡單,最好不要使用Vuex;如果需要構建一個中大型單頁應用,可以考慮使用Vuex去更好的再組件外部管理狀態。
4.如何使用Vuex:
<1>每一個Vuex應用的核心就是store(倉庫),它包含着應用中大部分的狀態(state),store是內存機制,而不是緩存機制,當前頁面一旦刷新揮着通過路由跳轉亦或是關閉,都會導致store初始化。
<2>Vuex的核心概念分別是:
(1)State: 存放基本數據 ----輔助函數mapState:
當一個組件需要獲取多個狀態時候,將這些狀態都聲明為計算屬性會有些重復和冗余。為了解決這個問題,我們可以使用 mapState 輔助函數幫助我們生成計算屬性,讓你少按幾次鍵。
(2)getters:是從store中的state派生出來的狀態,專門來計算state中的數據,相當於state中數據的計算屬性 ---輔助函數mapGetters輔助函數: mapGetters 輔助函數僅僅是將 store 中的 getters 映射到局部計算屬性,與state類似
(3)actions: 是專門操作異步請求的數據和業務邏輯的地方,它不能直接變更state中的狀態,而是通過commit來調用mutations里的方法來改變state里的數據。 ---輔助函數mapActions 將組建的methods映射為store.dispath調用
(4)mutations:提交mutions是更改Vuex中的狀態的唯一方法。mutations必須是同步的,如果要異步需要使用actions。每一個mutations都有一個字符串作為第一個參數,提交載荷作為第二個參數。 ---輔助函數mapMutations 將組建中的methods映射為store.commit調用。
(5)Moules:使用單一狀態樹,導致應用的所有狀態幾種到一個很大的對象,但是,當應用變得很大時,store對象會變得臃腫不堪,為了解決以上問題,Vuex允許我們將store分割到模塊(modules)。每個模塊擁有自己的state、mutations、avtions、grtters。
<3>當組件進行數據修改的時候我們需要調用dispatch來觸發actions里面的方法。actions里面的每個方法中都會 有一個commit方法,當方法執行的時候會通過commit來觸發mutations里面的方法進行數據的修改。 mutations里面的每個函數都會有一個state參數,這樣就可以在mutations里面進行state的數據修改 ,當數據修改完畢后,會傳導給頁面。頁面的數據也會發生改變
