vuex

1-Vuex是什么

專為Vue.js應(yīng)用程序開發(fā)的狀態(tài)管理模式济竹,采用集中式存儲管理應(yīng)用的所有組件的狀態(tài)瞻想,以相應(yīng)的規(guī)則保證狀態(tài)以一種可預(yù)測的方式發(fā)生變化蠕啄。

  1. Vuex 的狀態(tài)存儲是響應(yīng)式的丧没。當 Vue 組件從 store 中讀取狀態(tài)的時候们拙,若 store 中的狀態(tài)發(fā)生變化癞季,那么相應(yīng)的組件也會相應(yīng)地得到高效更新劫瞳。
  2. 你不能直接改變 store 中的狀態(tài)。改變 store 中的狀態(tài)的唯一途徑就是顯式地提交 (commit) mutation绷柒。這樣使得我們可以方便地跟蹤每一個狀態(tài)的變化志于,從而讓我們能夠?qū)崿F(xiàn)一些工具幫助我們更好地了解我們的應(yīng)用。
  • 狀態(tài)
    組件內(nèi)部狀態(tài) : 僅在一個組件內(nèi)使用的狀態(tài)(data字段)
    應(yīng)用級別狀態(tài) : 多個組件共用的狀態(tài)
  • 什么情況下使用Vuex
    多個視圖依賴于同一狀態(tài)
    來自不同視圖的行為需要變更同一狀態(tài)
  • 使用Vuex(在src中新建store文件夾=》index.js)
  1. 安裝vuex模塊 : npm install vuex --save
  2. 作為插件使用: Vue.use(Vuex)
  3. 定義容器:new Vuex.Store()
  4. 注入根實例
import Vue from 'vue'
import Vuex from 'vuex'

Vue.use(Vuex)

//定義一個容器
let store = new Vuex.Store({

})
export default store

//main.js
import store from './store/'
new Vue({
  el: '#app',
  router,
  store,//注入
  components: { App },
  template: '<App/>'
})
image.png

2-Vuex核心概念

  • store : 類似容器废睦,包含應(yīng)用的大部分狀態(tài)
  1. 一個頁面只能有一個store
  2. 狀態(tài)存儲是響應(yīng)式的
  3. 不能直接改變store中的狀態(tài)伺绽,唯一途徑是顯示的提交mutations
  • State:包含所有應(yīng)用級別的狀態(tài)的對象```
  • Getters:在組件內(nèi)部獲取store中狀態(tài)的函數(shù)
  • Mutations:唯一修改狀態(tài)的事件回調(diào)函數(shù)
  • Actions:包含異步操作、提交mutation改變狀態(tài)
    Action 類似于 mutation,不同在于
  1. Action 提交的是 mutation奈应,而不是直接變更狀態(tài)澜掩。
  2. Action 可以包含任意異步操作。
mutations : {
        addIncrement(state,payload){
            state.count += payload.n
        },
        deIncrement(state,payload){
            state.count -= payload.de
        }
    },
    //異步操作杖挣、提交mutation改變狀態(tài),提交mutations
    actions : {
        addAction(context){
            setTimeout(() => {
                //改變狀態(tài)肩榕,提交mutations
                context.commit('addIncrement',{
                    n : 5
                })
            }, 1000);
        }
    }
 addHandel(){
        //觸發(fā)一個action
        this.$store.dispatch('addAction')
  },
  • Modules:將store分割成不同的模塊
  • 我的總結(jié):數(shù)據(jù)統(tǒng)一放在state中,然后對于數(shù)據(jù)的處理惩妇,都統(tǒng)一在mutations中株汉,接著在組件內(nèi)部,綁定函數(shù)歌殃,觸發(fā)mutations中的函數(shù)乔妈。
//定義一個容器
let store = new Vuex.Store({
    state:{
        count : 100
    },
    //唯一修改狀態(tài)的事件回調(diào)函數(shù)
    mutations : {
        addIncrement(state){
            state.count += 1
        }
    }
})
//組件內(nèi)
export default {
  computed: {
      num(){
          //獲取狀態(tài)
          return this.$store.state.count
      }
  },
  methods: {
      addHandel(){
        //改變狀態(tài)氓皱,需要提交mutation : addIncrement
        this.$store.commit('addIncrement')
      }
  }
}

3-實例分析Vuex流程

vuex流程圖

圖解 :先從拿數(shù)據(jù)開始分析路召,拿數(shù)據(jù)就牽涉到異步操作,我們把異步操作定義在action中去匀泊,在頁面中去觸發(fā)一個action优训,action里面有一個ajax請求的后端接口朵你,拿到數(shù)據(jù)后要渲染到頁面中各聘,只需要去改變狀態(tài)(state)即可,然后就會重新的渲染到頁面中去抡医,所以拿到數(shù)據(jù)之后需要提交一個mutation,因為vuex中有一個原則:想改變狀態(tài)躲因,必須要提交一個mutation,然后在調(diào)試工具中就會監(jiān)控一下提交的狀態(tài),所以我們想看上一個下一個狀態(tài)就會很方便忌傻,vuex是響應(yīng)的大脉,狀態(tài)一旦發(fā)生改變就會重新渲染組件。

基本使用

由于 store 中的狀態(tài)是響應(yīng)式的水孩,在組件中調(diào)用 store 中的狀態(tài)簡單到僅需要在計算屬性中返回即可镰矿。

 computed: {
      num(){
          return this.$store.state.count
      }
 }

觸發(fā)變化也僅僅是在組件的 methods 中提交 mutation。

  methods: {
      addHandel(){
          //改變狀態(tài)俘种,需要提交mutation : addIncrement
        // this.$store.commit('addIncrement',{
        //     n:5
        // })
        //觸發(fā)一個action
        this.$store.dispatch('addAction')
      },
      deHandel(){
        //this.$store.commit('deIncrement')
        this.$store.commit({
            type : 'deIncrement',
            de : 10
        })
      }
  }

4-官網(wǎng)API摘要

1. 在 Vue 組件中獲得 Vuex 狀態(tài)

那么我們?nèi)绾卧?Vue 組件中展示狀態(tài)呢秤标?由于 Vuex 的狀態(tài)存儲是響應(yīng)式的,從 store 實例中讀取狀態(tài)最簡單的方法就是在計算屬性中返回某個狀態(tài)宙刘,每當 store.state.count 變化的時候, 都會重新求取計算屬性苍姜,并且觸發(fā)更新相關(guān)聯(lián)的 DOM。

// 創(chuàng)建一個 Counter 組件
const Counter = {
 template: `<div>{{ count }}</div>`,
 computed: {
   count () {
     return $store.state.count
   }
 }
}
2. Action

Action 類似于 mutation悬包,不同在于:

  1. Action 提交的是 mutation衙猪,而不是直接變更狀態(tài)。
  2. Action 可以包含任意異步操作。
    讓我們來注冊一個簡單的 action:
const store = new Vuex.Store({
  state: {
    count: 0
  },
  mutations: {
    increment (state) {
      state.count++
    }
  },
  actions: {
    increment (context) {
      context.commit('increment')
    }
  }
})

Action 函數(shù)接受一個與 store 實例具有相同方法和屬性的 context 對象垫释,因此你可以調(diào)用 context.commit 提交一個 mutation丝格,或者通過 context.statecontext.getters 來獲取 state 和 getters。當我們在之后介紹到 Modules時棵譬,你就知道 context 對象為什么不是 store 實例本身了铁追。

實踐中,我們會經(jīng)常用到 ES2015 的 參數(shù)解構(gòu) 來簡化代碼(特別是我們需要調(diào)用 commit 很多次的時候):

actions: {
  increment ({ commit }) {
    commit('increment')
  }
}
3. Getter(類似計算屬性)

在vue中茫船,我們需要對變量進行進一步處理琅束,可以放在computed里,不建議放在模板中算谈,同樣涩禀,vuex中,state中的狀態(tài)如果需要進一步處理然眼,我們可以放入getters.

//vuex中
 getters:{
        filterCount(state){
            return state.count >= 120 ? 120 : state.count
        }
    }
//組件中
 computed: {
      num2(){
          return this.$store.getters.filterCount
      }
}

4-輔助函數(shù)

  • mapState
  • mapGetters
  • mapMutations
  • mapActions
import {mapState,mapGetters,mapActions,mapMutations} from 'vuex'

以下是兩種寫法的對比

computed: {
       num(){
           return this.$store.state.count
       },
       num2(){
           return this.$store.getters.filterCount
       }
 }
===================================
 computed: {
       ...mapState(['count']) ,
       ...mapGetters({
           num2:'filterCount'
       })
  }
addHandel(){
           //改變狀態(tài)艾船,需要提交mutation : addIncrement
          this.$store.commit('addIncrement',{
              n:5
          })
         //觸發(fā)一個action
         this.$store.dispatch('addAction')
       },
       deHandel(){
         //this.$store.commit('deIncrement')
         this.$store.commit({
             type : 'deIncrement',
             de : 10
         })
       }
============================
...mapActions({
          deHandel :'addIncrement'
      }),
      ...mapMutations({
          addHandel:'deIncrement' //傳參在模板上即可
})
最后編輯于
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請聯(lián)系作者
  • 序言:七十年代末,一起剝皮案震驚了整個濱河市高每,隨后出現(xiàn)的幾起案子屿岂,更是在濱河造成了極大的恐慌,老刑警劉巖鲸匿,帶你破解...
    沈念sama閱讀 222,729評論 6 517
  • 序言:濱河連續(xù)發(fā)生了三起死亡事件爷怀,死亡現(xiàn)場離奇詭異,居然都是意外死亡带欢,警方通過查閱死者的電腦和手機运授,發(fā)現(xiàn)死者居然都...
    沈念sama閱讀 95,226評論 3 399
  • 文/潘曉璐 我一進店門,熙熙樓的掌柜王于貴愁眉苦臉地迎上來乔煞,“玉大人吁朦,你說我怎么就攤上這事《杉郑” “怎么了逗宜?”我有些...
    開封第一講書人閱讀 169,461評論 0 362
  • 文/不壞的土叔 我叫張陵,是天一觀的道長空骚。 經(jīng)常有香客問我纺讲,道長,這世上最難降的妖魔是什么府怯? 我笑而不...
    開封第一講書人閱讀 60,135評論 1 300
  • 正文 為了忘掉前任刻诊,我火速辦了婚禮,結(jié)果婚禮上牺丙,老公的妹妹穿的比我還像新娘则涯。我一直安慰自己复局,他們只是感情好,可當我...
    茶點故事閱讀 69,130評論 6 398
  • 文/花漫 我一把揭開白布粟判。 她就那樣靜靜地躺著亿昏,像睡著了一般。 火紅的嫁衣襯著肌膚如雪档礁。 梳的紋絲不亂的頭發(fā)上角钩,一...
    開封第一講書人閱讀 52,736評論 1 312
  • 那天,我揣著相機與錄音呻澜,去河邊找鬼递礼。 笑死,一個胖子當著我的面吹牛羹幸,可吹牛的內(nèi)容都是我干的脊髓。 我是一名探鬼主播,決...
    沈念sama閱讀 41,179評論 3 422
  • 文/蒼蘭香墨 我猛地睜開眼栅受,長吁一口氣:“原來是場噩夢啊……” “哼将硝!你這毒婦竟也來了?” 一聲冷哼從身側(cè)響起屏镊,我...
    開封第一講書人閱讀 40,124評論 0 277
  • 序言:老撾萬榮一對情侶失蹤依疼,失蹤者是張志新(化名)和其女友劉穎,沒想到半個月后而芥,有當?shù)厝嗽跇淞掷锇l(fā)現(xiàn)了一具尸體律罢,經(jīng)...
    沈念sama閱讀 46,657評論 1 320
  • 正文 獨居荒郊野嶺守林人離奇死亡,尸身上長有42處帶血的膿包…… 初始之章·張勛 以下內(nèi)容為張勛視角 年9月15日...
    茶點故事閱讀 38,723評論 3 342
  • 正文 我和宋清朗相戀三年蔚出,在試婚紗的時候發(fā)現(xiàn)自己被綠了弟翘。 大學(xué)時的朋友給我發(fā)了我未婚夫和他白月光在一起吃飯的照片虫腋。...
    茶點故事閱讀 40,872評論 1 353
  • 序言:一個原本活蹦亂跳的男人離奇死亡骄酗,死狀恐怖,靈堂內(nèi)的尸體忽然破棺而出悦冀,到底是詐尸還是另有隱情趋翻,我是刑警寧澤,帶...
    沈念sama閱讀 36,533評論 5 351
  • 正文 年R本政府宣布盒蟆,位于F島的核電站踏烙,受9級特大地震影響,放射性物質(zhì)發(fā)生泄漏历等。R本人自食惡果不足惜讨惩,卻給世界環(huán)境...
    茶點故事閱讀 42,213評論 3 336
  • 文/蒙蒙 一、第九天 我趴在偏房一處隱蔽的房頂上張望寒屯。 院中可真熱鬧荐捻,春花似錦黍少、人聲如沸。這莊子的主人今日做“春日...
    開封第一講書人閱讀 32,700評論 0 25
  • 文/蒼蘭香墨 我抬頭看了看天上的太陽。三九已至魂角,卻和暖如春昵济,著一層夾襖步出監(jiān)牢的瞬間,已是汗流浹背野揪。 一陣腳步聲響...
    開封第一講書人閱讀 33,819評論 1 274
  • 我被黑心中介騙來泰國打工访忿, 沒想到剛下飛機就差點兒被人妖公主榨干…… 1. 我叫王不留,地道東北人斯稳。 一個月前我還...
    沈念sama閱讀 49,304評論 3 379
  • 正文 我出身青樓醉顽,卻偏偏與公主長得像,于是被迫代替她去往敵國和親平挑。 傳聞我的和親對象是個殘疾皇子游添,可洞房花燭夜當晚...
    茶點故事閱讀 45,876評論 2 361

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

  • 安裝 npm npm install vuex --save 在一個模塊化的打包系統(tǒng)中,您必須顯式地通過Vue.u...
    蕭玄辭閱讀 2,945評論 0 7
  • Vuex是什么通熄? Vuex 是一個專為 Vue.js應(yīng)用程序開發(fā)的狀態(tài)管理模式唆涝。它采用集中式存儲管理應(yīng)用的所有組件...
    蕭玄辭閱讀 3,124評論 0 6
  • vuex是一個狀態(tài)管理模式,通過用戶的actions觸發(fā)事件唇辨,然后通過mutations去更改數(shù)據(jù)(你也可以說狀態(tài)...
    Ming_Hu閱讀 2,026評論 3 3
  • vuex 場景重現(xiàn):一個用戶在注冊頁面注冊了手機號碼廊酣,跳轉(zhuǎn)到登錄頁面也想拿到這個手機號碼,你可以通過vue的組件化...
    sunny519111閱讀 8,023評論 4 111
  • Vuex 是什么赏枚? ** 官方解釋:Vuex 是一個專為 Vue.js 應(yīng)用程序開發(fā)的狀態(tài)管理模式**亡驰。它采用集中...
    Rz______閱讀 2,308評論 1 10