Vuex快速入門

Vuex是一個(gè)專為 Vue.js 應(yīng)用程序開發(fā)的狀態(tài)管理模式筛欢。它采用集中式存儲(chǔ)管理應(yīng)用的所有組件的狀態(tài),并以相應(yīng)的規(guī)則保證狀態(tài)以一種可預(yù)測的方式發(fā)生變化唇聘。Vuex 也集成到 Vue 的官方調(diào)試工具 devtools extension版姑,提供了諸如零配置的 time-travel 調(diào)試、狀態(tài)快照導(dǎo)入導(dǎo)出等高級(jí)調(diào)試功能迟郎。

核心概念

  • state剥险,驅(qū)動(dòng)應(yīng)用的數(shù)據(jù)源;
  • mutation 都有一個(gè)字符串的 事件類型 (type) 和 一個(gè) 回調(diào)函數(shù) (handler)
  • actions宪肖,響應(yīng)在 view 上的用戶輸入導(dǎo)致的狀態(tài)變化表制。
  • Getter健爬,store 的計(jì)算屬性,

State

在 Vue 組件中獲得 Vuex 狀態(tài)
  • 通過在根實(shí)例中注冊(cè) store 選項(xiàng)么介,該 store 實(shí)例會(huì)注入到根組件下的所有子組件中娜遵,且子組件能通過 this.$store訪問到
import Vue from 'vue'
import Vuex from 'vuex'

Vue.use(Vuex)

export default new Vuex.Store({
  state: {
      count:0
  },
  mutations: {
  },
  actions: {
  },
  modules: {
  }
})

<template>
  <div class="about">
    <h1>這是一個(gè)關(guān)于頁面{{count}}</h1>
  </div>
</template>
<script>
export default {
  name: "commerceUser",
  data () {
    return {
      count: this.$store.state.count,
    }
  }
}
</script>
  • 當(dāng)一個(gè)組件需要獲取多個(gè)狀態(tài)的時(shí)候,將這些狀態(tài)都聲明為計(jì)算屬性會(huì)有些重復(fù)和冗余壤短。為了解決這個(gè)問題魔熏,我們可以使用mapState 輔助函數(shù),通過將最終對(duì)象傳給computed屬性鸽扁,幫助生成計(jì)算屬性蒜绽。
<template>
  <div class="about">
    <h1>這是一個(gè)關(guān)于頁面{{count}}</h1>
  </div>
</template>
<script>
import { mapState } from 'vuex'
export default {
  name: "commerceUser",
  computed: {
    ...mapState(['count'])
  },
}
</script>

mutation

更改 Vuex 的 store 中的狀態(tài)的唯一方法是提交 mutation,每個(gè) mutation 都有一個(gè)字符串的 事件類型 (type) 和 一個(gè) 回調(diào)函數(shù) (handler)桶现。

import Vue from 'vue'
import Vuex from 'vuex'

Vue.use(Vuex)

export default new Vuex.Store({
  state: {
      count:2
  },
  mutations: {
    add (state)//add (state,step) {
        state.count++
    }
  },
  actions: {
  },
  modules: {
    
  },
   getters:{
    
   }
})

<template>
  <div class="about">
    <h1>{{$store.state.count}}</h1>
    <button @click="bt">+1</button>
  </div>
</template>
<script>
import { mapState } from 'vuex'
export default {
  name: "commerceUser",
      data () {
        return {}
      },
  methods:{
      bt(){
         this.$store.commit('add')
      }
  }
}
</script>

可以在組件中使用 this.$store.commit('xxx') 提交 mutation躲雅,或者使用 mapMutations 輔助函數(shù)將組件中的 methods 映射為 store.commit 調(diào)用。

<template>
  <div class="about">
    <h1>{{$store.state.count}}</h1>
    <button @click="bt">+1</button>
  </div>
</template>
<script>
import { mapState,mapMutations } from 'vuex'
export default {
  name: "commerceUser",
      data () {
        return {}
      },
  methods:{
     ...mapMutations(['add']),
     bt(){
         this.add()
     }
  }
}
</script>

actions

Action 類似于 mutation骡和,不同在于:

  • Action 提交的是 mutation相赁,而不是直接變更狀態(tài)。
  • Action 可以包含任意異步操作慰于。

Getter

Vuex 允許我們?cè)?store 中定義“getter”(可以認(rèn)為是 store 的計(jì)算屬性)钮科。就像計(jì)算屬性一樣,getter 的返回值會(huì)根據(jù)它的依賴被緩存起來婆赠,且只有當(dāng)它的依賴值發(fā)生了改變才會(huì)被重新計(jì)算绵脯。

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

export default new Vuex.Store({
  state: {
      count:0
  },
  mutations: {
  },
  actions: {
  },
  modules: {
  },
  getters:{
        show(state){
            return '當(dāng)前最新數(shù)據(jù)'+state.count
        }
    }
})

<template>
  <div class="about">
    <h1>這是一個(gè)關(guān)于頁面{{this.$store.getters.show}}</h1>
  </div>
</template>
最后編輯于
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請(qǐng)聯(lián)系作者
  • 序言:七十年代末,一起剝皮案震驚了整個(gè)濱河市休里,隨后出現(xiàn)的幾起案子蛆挫,更是在濱河造成了極大的恐慌,老刑警劉巖妙黍,帶你破解...
    沈念sama閱讀 222,681評(píng)論 6 517
  • 序言:濱河連續(xù)發(fā)生了三起死亡事件悴侵,死亡現(xiàn)場離奇詭異,居然都是意外死亡拭嫁,警方通過查閱死者的電腦和手機(jī)可免,發(fā)現(xiàn)死者居然都...
    沈念sama閱讀 95,205評(píng)論 3 399
  • 文/潘曉璐 我一進(jìn)店門,熙熙樓的掌柜王于貴愁眉苦臉地迎上來做粤,“玉大人浇借,你說我怎么就攤上這事⊥匝纾” “怎么了逮刨?”我有些...
    開封第一講書人閱讀 169,421評(píng)論 0 362
  • 文/不壞的土叔 我叫張陵呕缭,是天一觀的道長堵泽。 經(jīng)常有香客問我修己,道長,這世上最難降的妖魔是什么迎罗? 我笑而不...
    開封第一講書人閱讀 60,114評(píng)論 1 300
  • 正文 為了忘掉前任睬愤,我火速辦了婚禮,結(jié)果婚禮上纹安,老公的妹妹穿的比我還像新娘尤辱。我一直安慰自己,他們只是感情好厢岂,可當(dāng)我...
    茶點(diǎn)故事閱讀 69,116評(píng)論 6 398
  • 文/花漫 我一把揭開白布光督。 她就那樣靜靜地躺著,像睡著了一般塔粒。 火紅的嫁衣襯著肌膚如雪结借。 梳的紋絲不亂的頭發(fā)上,一...
    開封第一講書人閱讀 52,713評(píng)論 1 312
  • 那天卒茬,我揣著相機(jī)與錄音船老,去河邊找鬼。 笑死圃酵,一個(gè)胖子當(dāng)著我的面吹牛柳畔,可吹牛的內(nèi)容都是我干的。 我是一名探鬼主播郭赐,決...
    沈念sama閱讀 41,170評(píng)論 3 422
  • 文/蒼蘭香墨 我猛地睜開眼薪韩,長吁一口氣:“原來是場噩夢(mèng)啊……” “哼!你這毒婦竟也來了捌锭?” 一聲冷哼從身側(cè)響起躬存,我...
    開封第一講書人閱讀 40,116評(píng)論 0 277
  • 序言:老撾萬榮一對(duì)情侶失蹤,失蹤者是張志新(化名)和其女友劉穎舀锨,沒想到半個(gè)月后岭洲,有當(dāng)?shù)厝嗽跇淞掷锇l(fā)現(xiàn)了一具尸體,經(jīng)...
    沈念sama閱讀 46,651評(píng)論 1 320
  • 正文 獨(dú)居荒郊野嶺守林人離奇死亡坎匿,尸身上長有42處帶血的膿包…… 初始之章·張勛 以下內(nèi)容為張勛視角 年9月15日...
    茶點(diǎn)故事閱讀 38,714評(píng)論 3 342
  • 正文 我和宋清朗相戀三年盾剩,在試婚紗的時(shí)候發(fā)現(xiàn)自己被綠了。 大學(xué)時(shí)的朋友給我發(fā)了我未婚夫和他白月光在一起吃飯的照片替蔬。...
    茶點(diǎn)故事閱讀 40,865評(píng)論 1 353
  • 序言:一個(gè)原本活蹦亂跳的男人離奇死亡告私,死狀恐怖,靈堂內(nèi)的尸體忽然破棺而出承桥,到底是詐尸還是另有隱情驻粟,我是刑警寧澤,帶...
    沈念sama閱讀 36,527評(píng)論 5 351
  • 正文 年R本政府宣布,位于F島的核電站蜀撑,受9級(jí)特大地震影響挤巡,放射性物質(zhì)發(fā)生泄漏。R本人自食惡果不足惜酷麦,卻給世界環(huán)境...
    茶點(diǎn)故事閱讀 42,211評(píng)論 3 336
  • 文/蒙蒙 一矿卑、第九天 我趴在偏房一處隱蔽的房頂上張望。 院中可真熱鬧沃饶,春花似錦母廷、人聲如沸。這莊子的主人今日做“春日...
    開封第一講書人閱讀 32,699評(píng)論 0 25
  • 文/蒼蘭香墨 我抬頭看了看天上的太陽。三九已至馆揉,卻和暖如春椎咧,著一層夾襖步出監(jiān)牢的瞬間,已是汗流浹背把介。 一陣腳步聲響...
    開封第一講書人閱讀 33,814評(píng)論 1 274
  • 我被黑心中介騙來泰國打工勤讽, 沒想到剛下飛機(jī)就差點(diǎn)兒被人妖公主榨干…… 1. 我叫王不留,地道東北人拗踢。 一個(gè)月前我還...
    沈念sama閱讀 49,299評(píng)論 3 379
  • 正文 我出身青樓脚牍,卻偏偏與公主長得像,于是被迫代替她去往敵國和親巢墅。 傳聞我的和親對(duì)象是個(gè)殘疾皇子诸狭,可洞房花燭夜當(dāng)晚...
    茶點(diǎn)故事閱讀 45,870評(píng)論 2 361