vuex簡單總結

前端開膛手發表於2018-08-07

1,vuex是單一狀態樹,管理元件共享的變數,元件怎麼樣獲得vuex資料呢,最簡單的辦法就是在computed裡return 出vuex裡的資料,

2,入口檔案中引入‘vuex’,vue.use(vuex)來注入全部元件,以保證store能被每個元件訪問,new vuex.store()來建立store,state:state來註冊資料,state可以事先在別的模組中已被定義

3,store有自己的屬性:state,mutations,actions,getters,plugins等等,getters相當於普通vue元件的計算屬性,目的是對state在源頭上做初步的粗略加工,比如說過濾,這樣做的好處是,普通元件不需要重複計算

4,mutations是觸發狀態變化的唯一途徑,別的方法雖然可以改變state,但是做不到表現層和資料層的同步變化,mutations同樣可以事先在別的模組中定義,方便統一管理,每個mutations都是一個具名函式,函式名就是所謂的type,每個mutations的第一個引數必須是state,第二個引數就是所謂的載荷(可選),也就是希望給原state增加(或減少)的東西,mutations必須通過store.commit(,)觸發,相應的,第一個引數就是type名,第二個可選引數可以是任意值,但是一般是物件,甚至type可以和載荷寫在同一個物件中,傳給store.commit()使用

5,以map開頭的方法都是vuex的方法,有mapState,mapMutations,mapActions,maPgetters等,通過import{}from ‘vuex’按需使用,map方法意為對映,都是為了寫法方便而使用,其實就是為了不寫this.$store.state...這些字,他們在普通元件裡的computed和methods裡被定義,computed當然寫mapGetters和mapStates,methods裡面寫mapMutations和mapActions

6,類似於...mapState這樣的寫法,目的是將vuex中的變數和元件的區域性變數混合為一個物件供區域性元件使用,畢竟,並不是所有的資料都必須是vuex來提供

7,mutations必須嚴格限定為同步操作,要進行非同步操作則必須使用actions,actions接受一個和store的克隆版作為引數,擁有與store一樣的屬性和方法,引數解構後的寫法是actionName({commit}){commit(mutationName)},函式體內可以執行非同步操作,action的觸發方法是store.dispatch( , ), 第一個引數是actionName,後面接載荷


相關文章