初識vuex

vuex2.0 基本使用--- mutation 和 action

http://www.cnblogs.com/SamWeb/p/6543931.html(借鑒處)

如果是組件與組件之間的通信非常復雜,不光是父子組件,還有兄弟組件硝训,那就需要用到狀態(tài)管理锨匆,vuex





1, mutation

The only way to actually change state in a Vuex store is by committing a mutation, 在vue 中,只有mutation 才能改變state. ?mutation 類似事件姜性,每一個mutation都有一個類型和一個處理函數(shù)瞪慧,因為只有mutation 才能改變state, 所以處理函數(shù)自動會獲得一個默認參數(shù) state.?所謂的類型其實就是名字,action去comit 一個mutation, 它要指定去commit哪個mutation, 所以mutation至少需要一個名字部念,commit mutation 之后弃酌, 要做什么事情氨菇,那就需要給它指定一個處理函數(shù), 類型(名字) + 處理函數(shù)就構(gòu)成了mutation. 現(xiàn)在store.js添加mutation.

需要一個狀態(tài)管理矢腻,按照一定的機制把你的變量變換成vue內(nèi)部的模型门驾。這個東西就是vuex。因為約定比較多多柑,略顯復雜點奶是,但是耐心看一下還是很容易接受的。它主要分四個部分竣灌,state,getters,mutations,actions聂沙。先定義一個user.js如下:

而getters顧名思義就是獲取接口,mutations(突變)這個詞有點唬人初嘹,其實就是setters嘛及汉。里面的方法自帶state參數(shù)。而actions就是mutations的異步方法屯烦。

state就是我們放共享變量的地方坷随。比如下面的userInfo.




import Vue from 'vue';

import Vuex from'vuex';

Vue.use(Vuex);

const userStore=newVuex.Store({

state:{

userInfo:{

userName:""

}

},

getters:{

getUserInfo(state){

returnstate.userInfo;

}

},

mutations:{

setUserInfo(state,userInfo){

state.userInfo=userInfo;

}

},

actions:{

setUserInfo({commit}){

commit('setUserInfo');

}

}

})

exportdefaultuserStore;



自己初期項目中的實例。



最后編輯于
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請聯(lián)系作者
  • 序言:七十年代末驻龟,一起剝皮案震驚了整個濱河市温眉,隨后出現(xiàn)的幾起案子,更是在濱河造成了極大的恐慌翁狐,老刑警劉巖类溢,帶你破解...
    沈念sama閱讀 219,039評論 6 508
  • 序言:濱河連續(xù)發(fā)生了三起死亡事件,死亡現(xiàn)場離奇詭異露懒,居然都是意外死亡闯冷,警方通過查閱死者的電腦和手機,發(fā)現(xiàn)死者居然都...
    沈念sama閱讀 93,426評論 3 395
  • 文/潘曉璐 我一進店門懈词,熙熙樓的掌柜王于貴愁眉苦臉地迎上來蛇耀,“玉大人,你說我怎么就攤上這事坎弯〉僦希” “怎么了?”我有些...
    開封第一講書人閱讀 165,417評論 0 356
  • 文/不壞的土叔 我叫張陵荞怒,是天一觀的道長洒琢。 經(jīng)常有香客問我,道長褐桌,這世上最難降的妖魔是什么衰抑? 我笑而不...
    開封第一講書人閱讀 58,868評論 1 295
  • 正文 為了忘掉前任,我火速辦了婚禮荧嵌,結(jié)果婚禮上呛踊,老公的妹妹穿的比我還像新娘砾淌。我一直安慰自己,他們只是感情好谭网,可當我...
    茶點故事閱讀 67,892評論 6 392
  • 文/花漫 我一把揭開白布汪厨。 她就那樣靜靜地躺著,像睡著了一般愉择。 火紅的嫁衣襯著肌膚如雪劫乱。 梳的紋絲不亂的頭發(fā)上,一...
    開封第一講書人閱讀 51,692評論 1 305
  • 那天锥涕,我揣著相機與錄音衷戈,去河邊找鬼。 笑死层坠,一個胖子當著我的面吹牛殖妇,可吹牛的內(nèi)容都是我干的。 我是一名探鬼主播破花,決...
    沈念sama閱讀 40,416評論 3 419
  • 文/蒼蘭香墨 我猛地睜開眼谦趣,長吁一口氣:“原來是場噩夢啊……” “哼!你這毒婦竟也來了座每?” 一聲冷哼從身側(cè)響起前鹅,我...
    開封第一講書人閱讀 39,326評論 0 276
  • 序言:老撾萬榮一對情侶失蹤,失蹤者是張志新(化名)和其女友劉穎尺栖,沒想到半個月后嫡纠,有當?shù)厝嗽跇淞掷锇l(fā)現(xiàn)了一具尸體烦租,經(jīng)...
    沈念sama閱讀 45,782評論 1 316
  • 正文 獨居荒郊野嶺守林人離奇死亡延赌,尸身上長有42處帶血的膿包…… 初始之章·張勛 以下內(nèi)容為張勛視角 年9月15日...
    茶點故事閱讀 37,957評論 3 337
  • 正文 我和宋清朗相戀三年,在試婚紗的時候發(fā)現(xiàn)自己被綠了叉橱。 大學時的朋友給我發(fā)了我未婚夫和他白月光在一起吃飯的照片挫以。...
    茶點故事閱讀 40,102評論 1 350
  • 序言:一個原本活蹦亂跳的男人離奇死亡,死狀恐怖窃祝,靈堂內(nèi)的尸體忽然破棺而出掐松,到底是詐尸還是另有隱情,我是刑警寧澤粪小,帶...
    沈念sama閱讀 35,790評論 5 346
  • 正文 年R本政府宣布大磺,位于F島的核電站,受9級特大地震影響探膊,放射性物質(zhì)發(fā)生泄漏杠愧。R本人自食惡果不足惜,卻給世界環(huán)境...
    茶點故事閱讀 41,442評論 3 331
  • 文/蒙蒙 一逞壁、第九天 我趴在偏房一處隱蔽的房頂上張望流济。 院中可真熱鬧锐锣,春花似錦、人聲如沸绳瘟。這莊子的主人今日做“春日...
    開封第一講書人閱讀 31,996評論 0 22
  • 文/蒼蘭香墨 我抬頭看了看天上的太陽糖声。三九已至斤彼,卻和暖如春,著一層夾襖步出監(jiān)牢的瞬間姨丈,已是汗流浹背畅卓。 一陣腳步聲響...
    開封第一講書人閱讀 33,113評論 1 272
  • 我被黑心中介騙來泰國打工, 沒想到剛下飛機就差點兒被人妖公主榨干…… 1. 我叫王不留蟋恬,地道東北人翁潘。 一個月前我還...
    沈念sama閱讀 48,332評論 3 373
  • 正文 我出身青樓,卻偏偏與公主長得像歼争,于是被迫代替她去往敵國和親拜马。 傳聞我的和親對象是個殘疾皇子,可洞房花燭夜當晚...
    茶點故事閱讀 45,044評論 2 355

推薦閱讀更多精彩內(nèi)容

  • 安裝 npm npm install vuex --save 在一個模塊化的打包系統(tǒng)中沐绒,您必須顯式地通過Vue.u...
    蕭玄辭閱讀 2,938評論 0 7
  • Vuex是什么俩莽? Vuex 是一個專為 Vue.js應用程序開發(fā)的狀態(tài)管理模式。它采用集中式存儲管理應用的所有組件...
    蕭玄辭閱讀 3,120評論 0 6
  • vuex 場景重現(xiàn):一個用戶在注冊頁面注冊了手機號碼,跳轉(zhuǎn)到登錄頁面也想拿到這個手機號碼,你可以通過vue的組件化...
    sunny519111閱讀 8,017評論 4 111
  • 上一章總結(jié)了 Vuex 的框架原理位他,這一章我們將從 Vuex 的入口文件開始烤黍,分步驟閱讀和解析源碼。由于 Vuex...
    你的肖同學閱讀 1,788評論 3 16
  • Vuex 是一個專為 Vue.js 應用程序開發(fā)的狀態(tài)管理模式睡汹。它采用集中式存儲管理應用的所有組件的狀態(tài),并以相應...
    白水螺絲閱讀 4,668評論 7 61