? ? ? 使用過vue的人都知道vue實例有一個選項這么個東西,什么是選項呢.比如一個vue實例里的el,data,computed,mounted,methods等等.所以vuex用一個叫store的實例.他可以當做vue實例的一個選項去使用,和vue-router一樣使用前,調(diào)用Vue.use(vue-router) Vue.use(Vuex).

如果在vue實例里選項的鍵值相同的話可以使用簡寫

圖片發(fā)自簡書App

store實例與vue實例可以對應的去理解

store ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? vm

state ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? data

mutation ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ?methods

getters ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? computed

一旦在跟實例里使用store選項,那么下邊所有子組件都可以使用store里的state,getters.

而store里的Actions和mutations是對store實例狀態(tài)的處理,其中Actions不會直接去改變狀態(tài)state,而是去分發(fā),調(diào)度,提交一個事件類型,狀態(tài)改變只發(fā)生在mutations里

? ? ? ? actions和mutations里的事件可以不使用[] 可以直接寫USER_SINGIN,其中Actions中事件的第一個參數(shù)是content,它具有和store相同的屬性和方法但不是store實例本身,后面的參數(shù)就是用戶操作時事件傳遞的參數(shù),像{ commit ,dispatch }寫法是一種簡寫的方式,意思是從context獲取commit和dispatch兩個方法,如果不這樣寫可以用context.dispatch或者context.commit方法,其中dispatch和commit在分發(fā)事件上有一定的區(qū)別.mutations時間里的第一個參數(shù)是state,它可以訪問store實例里的所有state并且可以改變他們從而使頁面UI發(fā)生改變.

? ? ? getters更傾向于寫一些過濾store里state的方法,

? ? ?在子組件里可以通過this.$store 來獲取store下邊的state和getters對象里的方法

? ? 當然store實例選項有對應的輔助函數(shù)import { mapActions ,mapState ,mapMutations} from 'vuex';

? 在子組件里你可以這樣使用

第一次寫這種東西,不知道寫的亂不亂,如有高人指點,感激不盡

可以詳談----微信:::18510954161