Vuex 入門

Vuex 是什么抠艾?

官方給出的解釋:Vuex 是一個(gè)專為 Vue.js 應(yīng)用程序開發(fā)的狀態(tài)管理模式。它采用集中式存儲管理應(yīng)用的所有組件的狀態(tài)桨昙,并以相應(yīng)的規(guī)則保證狀態(tài)以一種可預(yù)測的方式發(fā)生變化检号。


自制vuex LOGO

相信很多新選手看完這段話有種絕望的感覺。開始我也是這樣的蛙酪,后來我想到了一個(gè)比方齐苛!

比如某年級有5個(gè)小班,每個(gè)小班有25個(gè)同學(xué)桂塞,但是只有一個(gè)老師授課凹蜂,假如5個(gè)小班就對應(yīng)著5個(gè)組件,每個(gè)班的25個(gè)同學(xué)就相當(dāng)于每個(gè)組件中的25條數(shù)據(jù)阁危,這個(gè)老師就相當(dāng)于 vuex 玛痊,老師講的課就相當(dāng)于每一條數(shù)據(jù)。要保證每個(gè)同學(xué)受到同樣的教育狂打,就需要這個(gè)老師把每節(jié)課分別講5遍擂煞,還不能保證每個(gè)班的同學(xué)聽到的效果相同。一段時(shí)間后趴乡,老師覺得這樣特別麻煩還很累对省,就想了一個(gè)辦法蝗拿,找了一個(gè)大教室,把這5個(gè)小班的同學(xué)合并到一起蒿涎,這樣每個(gè)課程只需要講一次就好啦哀托,而且還保證了每個(gè)班的同學(xué)聽到的效果相同。這就是 vuex 的作用劳秋,把各個(gè)組件中用到的數(shù)據(jù)統(tǒng)一管理仓手,同步發(fā)放,省時(shí)省心省力俗批。

那這個(gè) vuex 怎么用呢俗或?讓我們從一個(gè)簡單的 Vue 計(jì)數(shù)應(yīng)用開始

一、基本用法

1. 初始化并創(chuàng)建一個(gè)項(xiàng)目

vue init webpack-simple vuex-demo
cd vuex-demo
npm install

2. 安裝 vuex

npm install vuex -S

3. 在 src 目錄下創(chuàng)建 store.js 文件岁忘,并在 main.js 文件中導(dǎo)入并配置

store.js 中寫入

import Vue from 'vue'
//引入 vuex 并 use
import Vuex from 'vuex'
Vue.use(Vuex)

main.js 文件

import Vue from 'vue'
import App from './App.vue'
import store from './assets/store' //導(dǎo)入 store 對象

new Vue({
  //配置 store 選項(xiàng)辛慰,指定為 store 對象,會自動將 store 對象注入到所有子組件中干像,在子組件中通過 this.$store 訪問該 store 對象 
  store, 
  el: '#app',
  render: h => h(App)
})

4. 編輯 store.js 文件

在應(yīng)用 vuex 之前帅腌,我們還是需要看懂這個(gè)流程圖,其實(shí)很簡單麻汰。

vuex

Vue Components 是我們的 vue 組件速客,組件會觸發(fā)(dispatch)一些事件或動作( Actions);
② 我們在組件中發(fā)出的動作,肯定是想獲取或者改變數(shù)據(jù)的五鲫,但是在 vuex 中溺职,數(shù)據(jù)是集中管理的,我們不能直接去更改數(shù)據(jù),所以會把這個(gè)動作提交(Commit)到 Mutations 中;
③ 然后 Mutations 就去改變(Mutate)State 中的數(shù)據(jù)谤祖;
④ 當(dāng) State 中的數(shù)據(jù)被改變之后烂完,就會重新渲染(Render)到 Vue Components (組件)中去洗显, Vue Components (組件)展示更新后的數(shù)據(jù),完成一個(gè)流程。

Vuex 的 核心Store(倉庫),相當(dāng)于是一個(gè)容器澜躺,一個(gè) Store 實(shí)例中包含以下屬性的方法:

state 定義屬性(狀態(tài) 、數(shù)據(jù))
getters 用來獲取屬性
actions 定義方法(動作)
commit 提交變化抒蚜,修改數(shù)據(jù)的唯一方式就是顯示的提交 mutations
mutations 定義變化掘鄙,處理狀態(tài)(數(shù)據(jù))的改變
mapGetters 用來獲取屬性(數(shù)據(jù))
mapActions 用來獲取方法(動作)

store.js 中寫入

// 定義屬性(數(shù)據(jù))
var state = {
    count:6
}
// 創(chuàng)建 store 對象
const store = new Vuex.Store({
    state
})

// 導(dǎo)出 store 對象
export default store;
方式1、 在 app.vue 中就能通過 this.$store 訪問該 store 對象 嗡髓,獲取該 count 通铲。

其中需要注意的是 this.$store 中的 store 與 main.js 中配置的 store 相對應(yīng),一定要注意大小寫

<template>
  <div id="app">
    //把 count 方法直接寫入器贩,可自己執(zhí)行
    <h1>{{count}}</h1>
  </div>
</template>

<script>
export default {
  name: 'app',
  computed:{
    count(){
      //返回獲取到的數(shù)據(jù)
      return this.$store.state.count
    }
  }
}
</script>

執(zhí)行

npm run dev

就能在頁面中看到傳過來的數(shù)據(jù)了

方式2颅夺、vuex 提供的 mapGettersmapActions 來訪問

mapGetters 用來獲取屬性(數(shù)據(jù))

① 在 app.vue 中引入 mapGetters

import {mapGetters} from 'vuex'

② 在 app.vue 文件的計(jì)算屬性中調(diào)用 mapGetters 輔助方法,并傳入一個(gè)數(shù)組蛹稍,在數(shù)組中指定要獲取的屬性 count

<script>
import {mapGetters,mapActions} from 'vuex'
export default {
  name: 'app',
  computed:mapGetters([
    //此處的 count 與以下 store.js 文件中 getters 內(nèi)的 count 相對應(yīng)
    'count'
  ])
}
</script>

③ 在 store.js 中定義 getters 方法并導(dǎo)出

getters 用來獲取屬性

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

// 定義屬性(數(shù)據(jù))
var state = {
    count:6
}
// 定義 getters
var getters={
    //需要傳個(gè)形參吧黄,用來獲取 state 屬性
    count(state){
        return state.count
    }
}
// 創(chuàng)建 store 對象
const store = new Vuex.Store({
    state,
    getters
})

// 導(dǎo)出 store 對象
export default store;

這樣頁面上就會顯示傳過來的數(shù)據(jù)了!接下來我們來通過動作改變獲取到的數(shù)據(jù)

④在 store.js 中定義 actionsmutations 方法并導(dǎo)出

actions 定義方法(動作)
commit 提交變化唆姐,修改數(shù)據(jù)的唯一方式就是顯示的提交 mutations
mutations 定義變化拗慨,處理狀態(tài)(數(shù)據(jù))的改變

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

// 定義屬性(數(shù)據(jù))
var state = {
    count:6
}

// 定義 getters
var getters={
    count(state){
        return state.count
    }
}

// 定義 actions ,要執(zhí)行的動作奉芦,如流程的判斷赵抢、異步請求
const actions ={
    // ({commit,state}) 這種寫法是 es6 中的對象解構(gòu)
    increment({commit,state}){
        //提交一個(gè)名為 increment 的變化,名字可自定義声功,可以認(rèn)為是類型名烦却,與下方 mutations 中的 increment 對應(yīng)
        //commit 提交變化,修改數(shù)據(jù)的唯一方式就是顯式的提交 mutations
        commit('increment') 
    }
}

// 定義 mutations 先巴,處理狀態(tài)(數(shù)據(jù)) 的改變
const mutations ={
    //與上方 commit 中的 ‘increment’ 相對應(yīng)
    increment(state){
        state.count ++;
    }
}
// 創(chuàng)建 store 對象
const store = new Vuex.Store({
    state,
    getters,
    actions,
    mutations
})

// 導(dǎo)出 store 對象
export default store;

⑤ 在 app.vue 中引入 mapActions 其爵,并調(diào)用

mapActions 用來獲取方法(動作)

import {mapGetters,mapActions} from 'vuex'

調(diào)用 mapActions 輔助方法,并傳入一個(gè)數(shù)組伸蚯,在數(shù)組中指定要獲取的方法 increment

<template>
  <div id="app">
    //這個(gè) increment 方法與下面 methods 中的 increment 相對應(yīng)
    <button @click="increment">增加</button>
    <button>減少</button>
    <h1>{{count}}</h1>
  </div>
</template>

<script>
import {mapGetters,mapActions} from 'vuex'
export default {
  name: 'app',
  computed:mapGetters([
    'count'
  ]),
  methods:mapActions([
    //該 increment 來自 store.js 中導(dǎo)出的 actions 和 mutations 中的 increment 
    'increment',
  ])
}
</script>

這樣就能通過 button 來改變獲取到的 count 了摩渺。

現(xiàn)在你可以通過 storel.state 來獲取狀態(tài)對象,以及通過 store.commit 方法觸發(fā)狀態(tài)變更

注意:我們通過提交 mutation 的方式剂邮,而非直接改變 store.state.count 摇幻,是因?yàn)槲覀兿敫鞔_地追蹤到狀態(tài)的變化。

這是通過點(diǎn)擊事件讓 count++ 挥萌,不妨自己試著寫一下 count-- 吧绰姻!

看起來確實(shí)是挺繞的,需要在理解了原理的情況下瑞眼,再細(xì)細(xì)琢磨龙宏,加深理解。

最后編輯于
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請聯(lián)系作者
  • 序言:七十年代末伤疙,一起剝皮案震驚了整個(gè)濱河市银酗,隨后出現(xiàn)的幾起案子,更是在濱河造成了極大的恐慌徒像,老刑警劉巖黍特,帶你破解...
    沈念sama閱讀 211,817評論 6 492
  • 序言:濱河連續(xù)發(fā)生了三起死亡事件,死亡現(xiàn)場離奇詭異锯蛀,居然都是意外死亡灭衷,警方通過查閱死者的電腦和手機(jī),發(fā)現(xiàn)死者居然都...
    沈念sama閱讀 90,329評論 3 385
  • 文/潘曉璐 我一進(jìn)店門旁涤,熙熙樓的掌柜王于貴愁眉苦臉地迎上來翔曲,“玉大人迫像,你說我怎么就攤上這事⊥椋” “怎么了闻妓?”我有些...
    開封第一講書人閱讀 157,354評論 0 348
  • 文/不壞的土叔 我叫張陵,是天一觀的道長掠械。 經(jīng)常有香客問我由缆,道長,這世上最難降的妖魔是什么猾蒂? 我笑而不...
    開封第一講書人閱讀 56,498評論 1 284
  • 正文 為了忘掉前任均唉,我火速辦了婚禮,結(jié)果婚禮上肚菠,老公的妹妹穿的比我還像新娘舔箭。我一直安慰自己,他們只是感情好案糙,可當(dāng)我...
    茶點(diǎn)故事閱讀 65,600評論 6 386
  • 文/花漫 我一把揭開白布限嫌。 她就那樣靜靜地躺著,像睡著了一般时捌。 火紅的嫁衣襯著肌膚如雪怒医。 梳的紋絲不亂的頭發(fā)上,一...
    開封第一講書人閱讀 49,829評論 1 290
  • 那天奢讨,我揣著相機(jī)與錄音稚叹,去河邊找鬼。 笑死拿诸,一個(gè)胖子當(dāng)著我的面吹牛扒袖,可吹牛的內(nèi)容都是我干的。 我是一名探鬼主播亩码,決...
    沈念sama閱讀 38,979評論 3 408
  • 文/蒼蘭香墨 我猛地睜開眼季率,長吁一口氣:“原來是場噩夢啊……” “哼!你這毒婦竟也來了描沟?” 一聲冷哼從身側(cè)響起飒泻,我...
    開封第一講書人閱讀 37,722評論 0 266
  • 序言:老撾萬榮一對情侶失蹤,失蹤者是張志新(化名)和其女友劉穎吏廉,沒想到半個(gè)月后泞遗,有當(dāng)?shù)厝嗽跇淞掷锇l(fā)現(xiàn)了一具尸體,經(jīng)...
    沈念sama閱讀 44,189評論 1 303
  • 正文 獨(dú)居荒郊野嶺守林人離奇死亡席覆,尸身上長有42處帶血的膿包…… 初始之章·張勛 以下內(nèi)容為張勛視角 年9月15日...
    茶點(diǎn)故事閱讀 36,519評論 2 327
  • 正文 我和宋清朗相戀三年史辙,在試婚紗的時(shí)候發(fā)現(xiàn)自己被綠了。 大學(xué)時(shí)的朋友給我發(fā)了我未婚夫和他白月光在一起吃飯的照片。...
    茶點(diǎn)故事閱讀 38,654評論 1 340
  • 序言:一個(gè)原本活蹦亂跳的男人離奇死亡聊倔,死狀恐怖晦毙,靈堂內(nèi)的尸體忽然破棺而出,到底是詐尸還是另有隱情耙蔑,我是刑警寧澤结序,帶...
    沈念sama閱讀 34,329評論 4 330
  • 正文 年R本政府宣布,位于F島的核電站纵潦,受9級特大地震影響,放射性物質(zhì)發(fā)生泄漏垃环。R本人自食惡果不足惜邀层,卻給世界環(huán)境...
    茶點(diǎn)故事閱讀 39,940評論 3 313
  • 文/蒙蒙 一、第九天 我趴在偏房一處隱蔽的房頂上張望遂庄。 院中可真熱鬧寥院,春花似錦、人聲如沸涛目。這莊子的主人今日做“春日...
    開封第一講書人閱讀 30,762評論 0 21
  • 文/蒼蘭香墨 我抬頭看了看天上的太陽霹肝。三九已至估蹄,卻和暖如春,著一層夾襖步出監(jiān)牢的瞬間沫换,已是汗流浹背臭蚁。 一陣腳步聲響...
    開封第一講書人閱讀 31,993評論 1 266
  • 我被黑心中介騙來泰國打工, 沒想到剛下飛機(jī)就差點(diǎn)兒被人妖公主榨干…… 1. 我叫王不留讯赏,地道東北人垮兑。 一個(gè)月前我還...
    沈念sama閱讀 46,382評論 2 360
  • 正文 我出身青樓,卻偏偏與公主長得像漱挎,于是被迫代替她去往敵國和親系枪。 傳聞我的和親對象是個(gè)殘疾皇子,可洞房花燭夜當(dāng)晚...
    茶點(diǎn)故事閱讀 43,543評論 2 349

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

  • Vuex 是什么磕谅? Vuex 是一個(gè)專為 Vue.js 應(yīng)用程序開發(fā)的狀態(tài)管理模式私爷。它采用集中式存儲管理應(yīng)用的所有...
    寒梁沐月閱讀 462評論 0 0
  • 安裝 npm npm install vuex --save 在一個(gè)模塊化的打包系統(tǒng)中,您必須顯式地通過Vue.u...
    蕭玄辭閱讀 2,927評論 0 7
  • Vuex是什么怜庸? Vuex 是一個(gè)專為 Vue.js應(yīng)用程序開發(fā)的狀態(tài)管理模式当犯。它采用集中式存儲管理應(yīng)用的所有組件...
    蕭玄辭閱讀 3,111評論 0 6
  • (1)簡單的頁面中使用單向數(shù)據(jù)流 (2)vuex的流程圖 (3)store 由于 store 中的狀態(tài)是響應(yīng)式的,...
    西蘭花偉大炮閱讀 679評論 0 3
  • 很幸運(yùn)在楊小米的公號里能遇到這樣一個(gè)理財(cái)課程割疾,刷新了我的理財(cái)觀念嚎卫。原以為手里沒錢怎么理財(cái),可是正應(yīng)為沒錢,所以理財(cái)...
    鹽開水m閱讀 296評論 0 1