vuex 的理解

1.vuex是什么?

vuex是一個(gè)專門為vue.js應(yīng)用程序開發(fā)的狀態(tài)管理模式余赢。采用集中式存貯管理應(yīng)用的所有組件的狀態(tài),并以響應(yīng)的規(guī)則保證狀態(tài)以一種可預(yù)測(cè)的方式發(fā)生變化扛拨。

2.vuex的核心概念

vuex的屬性:

1. state

存儲(chǔ)數(shù)據(jù)举塔,存儲(chǔ)狀態(tài)求泰;

在根實(shí)例注冊(cè) store 后,用this.$store.state 來訪問计盒,對(duì)應(yīng)vue里面的data;

存儲(chǔ)數(shù)據(jù)的方式為響應(yīng)式,vue組件從store中讀取數(shù)據(jù),如數(shù)據(jù)發(fā)生變化暖庄,組件也會(huì)更新

2. getter

可以說是store 的計(jì)算屬性楼肪,它的返回值會(huì)根據(jù)它的依賴被緩存起來,并且只要它的依賴發(fā)生變化才會(huì)被重新計(jì)算

3. mutation

更改 vue 中 store 狀態(tài)的唯一方法就是?mutation

提交更新數(shù)據(jù)的方法 this.$store.commit ()

必須是同步的

4. action

用于處理異步任務(wù)

提交?mutation 間接變更的狀態(tài)肩钠,通過方法 this.$store.dispatch ()

5. module

將 store分割成模塊暂殖,每個(gè)模塊都有?state、?mutation呛每、action晨横、甚至是嵌套子模塊

vuex的數(shù)據(jù)傳遞流程:

當(dāng)組件進(jìn)行數(shù)據(jù)修改的時(shí)候,我們需要調(diào)用dispatch 來觸發(fā) actions 里面的方法手形。actions 里面的每一個(gè)方法都有一個(gè) commit 方法库糠,方法執(zhí)行的時(shí)候會(huì)通過commit 來觸發(fā)moutations 里面的方法進(jìn)行數(shù)據(jù)的修改。moutations 里面的每個(gè)函數(shù)都有一個(gè)state 參數(shù)曼玩,這樣就可以在moutations 里面修改 state ,當(dāng)數(shù)據(jù)修改完畢后豫尽,會(huì)傳給頁面顷帖,頁面的數(shù)據(jù)同時(shí)也改變渤滞。


3.為什么要用vuex?

在業(yè)務(wù)邏輯稍復(fù)雜后妄呕,組件間的通信會(huì)非常多嗽测,那么此時(shí)使用vue自帶的父=>子、子=>父唠粥、兄弟節(jié)點(diǎn)通信的方案會(huì)非常的繁瑣和冗余晤愧,面對(duì)這種問題,需要一種能夠更加清晰便捷的數(shù)據(jù)管理方案來進(jìn)行

vuex則將各組件共同使用的數(shù)據(jù)提升到vuex的store中去存儲(chǔ)和維護(hù)(修改)官份,那么就不需要在組件間冗余的傳遞數(shù)據(jù)了舅巷。

vuex的優(yōu)勢(shì):

1. vuex集中統(tǒng)一管理數(shù)據(jù),避免了組件間頻繁繁瑣的數(shù)據(jù)傳遞操作钠右;

2. vuex中的數(shù)據(jù)響應(yīng)式的,只要數(shù)據(jù)變化们陆,所有使用數(shù)據(jù)的組件都會(huì)自動(dòng)得到更新情屹;

3. 數(shù)據(jù)的每次變化都會(huì)被記錄下來,便于后續(xù)回溯問題定位錯(cuò)誤椅文,可以方便的用于收集線上bug復(fù)現(xiàn)用戶的使用場(chǎng)景惜颇。

最后編輯于
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請(qǐng)聯(lián)系作者
  • 序言:七十年代末凌摄,一起剝皮案震驚了整個(gè)濱河市,隨后出現(xiàn)的幾起案子锨亏,更是在濱河造成了極大的恐慌忙干,老刑警劉巖捐迫,帶你破解...
    沈念sama閱讀 217,185評(píng)論 6 503
  • 序言:濱河連續(xù)發(fā)生了三起死亡事件爱葵,死亡現(xiàn)場(chǎng)離奇詭異,居然都是意外死亡暇韧,警方通過查閱死者的電腦和手機(jī)浓瞪,發(fā)現(xiàn)死者居然都...
    沈念sama閱讀 92,652評(píng)論 3 393
  • 文/潘曉璐 我一進(jìn)店門乾颁,熙熙樓的掌柜王于貴愁眉苦臉地迎上來艺栈,“玉大人,你說我怎么就攤上這事湿右。” “怎么了吭狡?”我有些...
    開封第一講書人閱讀 163,524評(píng)論 0 353
  • 文/不壞的土叔 我叫張陵划煮,是天一觀的道長(zhǎng)缔俄。 經(jīng)常有香客問我,道長(zhǎng)俐载,這世上最難降的妖魔是什么遏佣? 我笑而不...
    開封第一講書人閱讀 58,339評(píng)論 1 293
  • 正文 為了忘掉前任,我火速辦了婚禮茅茂,結(jié)果婚禮上,老公的妹妹穿的比我還像新娘空闲。我一直安慰自己,他們只是感情好逗噩,可當(dāng)我...
    茶點(diǎn)故事閱讀 67,387評(píng)論 6 391
  • 文/花漫 我一把揭開白布异雁。 她就那樣靜靜地躺著僧须,像睡著了一般。 火紅的嫁衣襯著肌膚如雪担平。 梳的紋絲不亂的頭發(fā)上暂论,一...
    開封第一講書人閱讀 51,287評(píng)論 1 301
  • 那天,我揣著相機(jī)與錄音展哭,去河邊找鬼闻蛀。 笑死,一個(gè)胖子當(dāng)著我的面吹牛觉痛,可吹牛的內(nèi)容都是我干的。 我是一名探鬼主播映挂,決...
    沈念sama閱讀 40,130評(píng)論 3 418
  • 文/蒼蘭香墨 我猛地睜開眼柑船,長(zhǎng)吁一口氣:“原來是場(chǎng)噩夢(mèng)啊……” “哼泼各!你這毒婦竟也來了?” 一聲冷哼從身側(cè)響起,我...
    開封第一講書人閱讀 38,985評(píng)論 0 275
  • 序言:老撾萬榮一對(duì)情侶失蹤及塘,失蹤者是張志新(化名)和其女友劉穎锐极,沒想到半個(gè)月后灵再,有當(dāng)?shù)厝嗽跇淞掷锇l(fā)現(xiàn)了一具尸體,經(jīng)...
    沈念sama閱讀 45,420評(píng)論 1 313
  • 正文 獨(dú)居荒郊野嶺守林人離奇死亡栋猖,尸身上長(zhǎng)有42處帶血的膿包…… 初始之章·張勛 以下內(nèi)容為張勛視角 年9月15日...
    茶點(diǎn)故事閱讀 37,617評(píng)論 3 334
  • 正文 我和宋清朗相戀三年汪榔,在試婚紗的時(shí)候發(fā)現(xiàn)自己被綠了。 大學(xué)時(shí)的朋友給我發(fā)了我未婚夫和他白月光在一起吃飯的照片雌团。...
    茶點(diǎn)故事閱讀 39,779評(píng)論 1 348
  • 序言:一個(gè)原本活蹦亂跳的男人離奇死亡,死狀恐怖柿菩,靈堂內(nèi)的尸體忽然破棺而出,到底是詐尸還是另有隱情懦胞,我是刑警寧澤凉泄,帶...
    沈念sama閱讀 35,477評(píng)論 5 345
  • 正文 年R本政府宣布,位于F島的核電站胀糜,受9級(jí)特大地震影響蒂誉,放射性物質(zhì)發(fā)生泄漏。R本人自食惡果不足惜右锨,卻給世界環(huán)境...
    茶點(diǎn)故事閱讀 41,088評(píng)論 3 328
  • 文/蒙蒙 一、第九天 我趴在偏房一處隱蔽的房頂上張望悄窃。 院中可真熱鬧,春花似錦恩敌、人聲如沸鸦致。這莊子的主人今日做“春日...
    開封第一講書人閱讀 31,716評(píng)論 0 22
  • 文/蒼蘭香墨 我抬頭看了看天上的太陽绽乔。三九已至,卻和暖如春看疗,著一層夾襖步出監(jiān)牢的瞬間睦授,已是汗流浹背。 一陣腳步聲響...
    開封第一講書人閱讀 32,857評(píng)論 1 269
  • 我被黑心中介騙來泰國(guó)打工怖辆, 沒想到剛下飛機(jī)就差點(diǎn)兒被人妖公主榨干…… 1. 我叫王不留删顶,地道東北人。 一個(gè)月前我還...
    沈念sama閱讀 47,876評(píng)論 2 370
  • 正文 我出身青樓特咆,卻偏偏與公主長(zhǎng)得像录粱,于是被迫代替她去往敵國(guó)和親。 傳聞我的和親對(duì)象是個(gè)殘疾皇子啥繁,可洞房花燭夜當(dāng)晚...
    茶點(diǎn)故事閱讀 44,700評(píng)論 2 354

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

  • 對(duì)于簡(jiǎn)單的項(xiàng)目一些常用的vue方法足以解決些楣,但是涉及到頁面狀態(tài),權(quán)限判斷等一些復(fù)雜的傳值愁茁,vuex是必須的。 以上...
    追夢(mèng)的螞蟻閱讀 145評(píng)論 0 0
  • 面試題:談?wù)勀銓?duì)對(duì)vuex的理解 溫馨提示: 1.vuex是什么嘶居? 2.vuex的核心概念促煮; vuex的屬性; v...
    DreamofLimb閱讀 834評(píng)論 0 0
  • vuex 是一個(gè)狀態(tài)管理工具 管理data數(shù)據(jù) vuex采取集中式 將組件需要通訊的數(shù)據(jù)放在 vuex里面 (面...
    陳情令閱讀 380評(píng)論 0 1
  • 什么是Vuex? Vuex 是一個(gè)專為 Vue.js 應(yīng)用程序開發(fā)的狀態(tài)管理模式绳匀。它采用集中式存儲(chǔ)管理應(yīng)用的所有組...
    莫小耿閱讀 438評(píng)論 0 0
  • 6.1. vuex 理解 6.1.1. vuex 是什么 1)github 站點(diǎn):https://github.c...
    BJ000閱讀 87評(píng)論 0 1