簡述對Vuex的理解

尋星辰發表於2018-11-19
 
    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的資料修改 ,當資料修改完畢後,會傳導給頁面。頁面的資料也會發生改變

相關文章