Vuex 快速入門

Vuex的概述

Vuex是什么

Vuex是實現(xiàn)組件全局狀態(tài)(數(shù)據(jù))管理的一種機(jī)制避诽,可以方便的實現(xiàn)組件之間數(shù)據(jù)的共享肄方。


image.png
Vuex的好處
  • 能集中管理共享的數(shù)據(jù)稚矿,易于開發(fā)和后期維護(hù)
  • 能高效地實現(xiàn)組件之間的數(shù)據(jù)共享掏熬,提高開發(fā)效率
  • vuex中的數(shù)據(jù)是響應(yīng)式的搀崭,能實時保持?jǐn)?shù)據(jù)與頁面的同步
適用場景

只有組件間共享的數(shù)據(jù)叨粘,才有必要存儲到vux中;組件的私有數(shù)據(jù)存儲在自身data中即可

Vuex的基本使用

安裝vuex依賴包

npm install vuex --save

導(dǎo)入vuex包

import Vuex from 'vuex'
Vue.use(Vuex)

創(chuàng)建store對象

const store = new Vuex.Store({
    // state中存放的就是全局共享的數(shù)據(jù)
    state:{ count:0 }
})

將store對象掛載到vue實例中

new Vue({
    el: '#app',
    render: h => h(app),
    router,
    // 將創(chuàng)建的共享數(shù)據(jù)對象瘤睹,掛載到Vue實例中
    // 所有組件升敲,就可以直接從store中獲取全局的數(shù)據(jù)
    store
}

Vuex的核心概念

個人理解


image.png
State

State提供唯一的公共數(shù)據(jù)源,所有共享的數(shù)據(jù)都要統(tǒng)一放到Store的State中進(jìn)行存儲轰传。

const store = new Vuex.store({
    state: { count: 0 }
})
訪問State

第一種方式

this.$store.state.全局?jǐn)?shù)據(jù)名稱

第二種方式

// 1.從vuex中導(dǎo)入 mapState 函數(shù)
import { mapState } from 'vuex'
// 2.將需要的全局?jǐn)?shù)據(jù)映射為當(dāng)前組件的 computed 計算屬性
computed: {
    ...mapState(['count'])
    //把 state 里的數(shù)據(jù)當(dāng)成組件數(shù)據(jù)使用
}
Mutation

Mutation用于變更Store中的數(shù)據(jù)

  • 只能通過mutation變更Store數(shù)據(jù)驴党,不可以直接操作Store中的數(shù)據(jù)
  • 通過這種方式雖然操作繁瑣,但是可以集中監(jiān)控所有數(shù)據(jù)的變化
const store = new Vuex.store({
    state: { count: 0 },
    mutations: {
        add(state) {
            // 變更狀態(tài)
            state.count ++
        }
    }
})
觸發(fā)Mutation(commit)

第一種方式

this.$store.commit('add')

第二種方式

// 1.從vuex中導(dǎo)入 mapMutations 函數(shù)
import { mapMutations} from 'vuex'
// 2.將指定的 mutations 函數(shù)映射為當(dāng)前組件的 methods 函數(shù)
methods: {
    ...mapMutations(['add','addN'])
    //把 mutations 里的函數(shù)當(dāng)成組件函數(shù)使用
}
Action

Action用于處理異步任務(wù)
如果通過異步操作更改數(shù)據(jù)获茬,必須通過Action港庄,而不能直接用Mutation恕曲;是在Action中觸發(fā)Mutation間接更改。

const store = new Vuex.store({
    state: { count: 0 },
    mutations: {
        ...
    },
    actions: {
        addAsync(context) {
            setTimeOut(() => {
                context.commit('add')
            },1000)
        }
    }
})
觸發(fā)Action(dispatch)

第一種方式

this.$store.dispatch('addAsync')

第二種方式

// 1.從vuex中導(dǎo)入 mapActions 函數(shù)
import { mapActions } from 'vuex'
// 2.將指定的 actions 函數(shù)映射為當(dāng)前組件的 methods 函數(shù)
methods: {
    ...mapActions(['addAsync','addNAsync'])
    //把 actions 里的函數(shù)當(dāng)成組件函數(shù)使用
}
Getter

Getter用于對Store中的數(shù)據(jù)進(jìn)行加工處理形成新的數(shù)據(jù)把还。

  • Getter可以對Store中已有的數(shù)據(jù)加工處理之后形成新的數(shù)據(jù)吊履,類似Vue的計算屬性。
  • Store中數(shù)據(jù)發(fā)生變化练俐,Getter的數(shù)據(jù)也會跟著變化冕臭。
const store = new Vuex.store({
    state: { count: 0 },
    mutations: {
        ...
    },
    actions: {
        ...
    },
    getters: {
        showNum: state => {
            return '數(shù)量是:' + state.count
        }
    }
})
使用Getter

第一種方式

this.$store.getters.名稱

第二種方式

import { mapGetters } from 'vuex'
computed: {
    ...mapGetters(['showNum'])
    //把 getters 里的數(shù)據(jù)當(dāng)成組件數(shù)據(jù)使用
}
最后編輯于
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請聯(lián)系作者
  • 序言:七十年代末辜贵,一起剝皮案震驚了整個濱河市,隨后出現(xiàn)的幾起案子鼻由,更是在濱河造成了極大的恐慌厚棵,老刑警劉巖,帶你破解...
    沈念sama閱讀 222,681評論 6 517
  • 序言:濱河連續(xù)發(fā)生了三起死亡事件狠轻,死亡現(xiàn)場離奇詭異向楼,居然都是意外死亡谐区,警方通過查閱死者的電腦和手機(jī),發(fā)現(xiàn)死者居然都...
    沈念sama閱讀 95,205評論 3 399
  • 文/潘曉璐 我一進(jìn)店門昭抒,熙熙樓的掌柜王于貴愁眉苦臉地迎上來戈鲁,“玉大人嘹叫,你說我怎么就攤上這事诈乒。” “怎么了喂饥?”我有些...
    開封第一講書人閱讀 169,421評論 0 362
  • 文/不壞的土叔 我叫張陵员帮,是天一觀的道長。 經(jīng)常有香客問我捞高,道長,這世上最難降的妖魔是什么氢哮? 我笑而不...
    開封第一講書人閱讀 60,114評論 1 300
  • 正文 為了忘掉前任型檀,我火速辦了婚禮,結(jié)果婚禮上裂七,老公的妹妹穿的比我還像新娘仓坞。我一直安慰自己,他們只是感情好扯躺,可當(dāng)我...
    茶點故事閱讀 69,116評論 6 398
  • 文/花漫 我一把揭開白布录语。 她就那樣靜靜地躺著,像睡著了一般虽缕。 火紅的嫁衣襯著肌膚如雪蒲稳。 梳的紋絲不亂的頭發(fā)上,一...
    開封第一講書人閱讀 52,713評論 1 312
  • 那天剩胁,我揣著相機(jī)與錄音祥国,去河邊找鬼晾腔。 笑死啊犬,一個胖子當(dāng)著我的面吹牛,可吹牛的內(nèi)容都是我干的剔应。 我是一名探鬼主播语御,決...
    沈念sama閱讀 41,170評論 3 422
  • 文/蒼蘭香墨 我猛地睜開眼沃暗,長吁一口氣:“原來是場噩夢啊……” “哼!你這毒婦竟也來了孽锥?” 一聲冷哼從身側(cè)響起,我...
    開封第一講書人閱讀 40,116評論 0 277
  • 序言:老撾萬榮一對情侶失蹤唬涧,失蹤者是張志新(化名)和其女友劉穎碎节,沒想到半個月后抵卫,有當(dāng)?shù)厝嗽跇淞掷锇l(fā)現(xiàn)了一具尸體,經(jīng)...
    沈念sama閱讀 46,651評論 1 320
  • 正文 獨居荒郊野嶺守林人離奇死亡殖氏,尸身上長有42處帶血的膿包…… 初始之章·張勛 以下內(nèi)容為張勛視角 年9月15日...
    茶點故事閱讀 38,714評論 3 342
  • 正文 我和宋清朗相戀三年雅采,在試婚紗的時候發(fā)現(xiàn)自己被綠了慨亲。 大學(xué)時的朋友給我發(fā)了我未婚夫和他白月光在一起吃飯的照片。...
    茶點故事閱讀 40,865評論 1 353
  • 序言:一個原本活蹦亂跳的男人離奇死亡巴刻,死狀恐怖蛉签,靈堂內(nèi)的尸體忽然破棺而出茂附,到底是詐尸還是另有隱情,我是刑警寧澤乒验,帶...
    沈念sama閱讀 36,527評論 5 351
  • 正文 年R本政府宣布,位于F島的核電站狂塘,受9級特大地震影響鳄厌,放射性物質(zhì)發(fā)生泄漏。R本人自食惡果不足惜了嚎,卻給世界環(huán)境...
    茶點故事閱讀 42,211評論 3 336
  • 文/蒙蒙 一、第九天 我趴在偏房一處隱蔽的房頂上張望萝勤。 院中可真熱鬧呐伞,春花似錦、人聲如沸伶氢。這莊子的主人今日做“春日...
    開封第一講書人閱讀 32,699評論 0 25
  • 文/蒼蘭香墨 我抬頭看了看天上的太陽惧蛹。三九已至,卻和暖如春香嗓,著一層夾襖步出監(jiān)牢的瞬間,已是汗流浹背靠娱。 一陣腳步聲響...
    開封第一講書人閱讀 33,814評論 1 274
  • 我被黑心中介騙來泰國打工像云, 沒想到剛下飛機(jī)就差點兒被人妖公主榨干…… 1. 我叫王不留,地道東北人腋逆。 一個月前我還...
    沈念sama閱讀 49,299評論 3 379
  • 正文 我出身青樓侈贷,卻偏偏與公主長得像,于是被迫代替她去往敵國和親俏蛮。 傳聞我的和親對象是個殘疾皇子,可洞房花燭夜當(dāng)晚...
    茶點故事閱讀 45,870評論 2 361

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

  • 1.vuex是什么 Vuex 是一個專為 Vue.js 應(yīng)用程序開發(fā)的狀態(tài)管理模式。它采用集中式存儲管理應(yīng)用的所有...
    芒果香蕉蘋果梨閱讀 129評論 0 0
  • 本文為課程 vuex深入淺出 的學(xué)習(xí)總結(jié)與記錄亮垫;同時參照了vuex官方文檔抑党。文中demo的代碼可參考:我的碼云 一...
    明滅_閱讀 8,750評論 1 28
  • Vuex是一個專為 Vue.js 應(yīng)用程序開發(fā)的狀態(tài)管理模式底靠。它采用集中式存儲管理應(yīng)用的所有組件的狀態(tài),并以相應(yīng)的...
    夢安web開發(fā)閱讀 232評論 0 2
  • 9.1. 引言 Vue組件化做的確實非常徹底壹瘟,它獨有的vue單文件組件也是做的非常有特色鳄逾。組件化的同時帶來的是:組...
    IT老馬閱讀 1,189評論 2 4
  • vue的入門 按照官方的說法,vuex的定義是官方文檔查傳送門 Vuex 是一個專為 Vue.js 應(yīng)用程序開發(fā)的...
    Weastsea閱讀 343評論 0 0