Vue筆記(Vuex全局狀態(tài)管理器)

Vuex

全局狀態(tài)管理器匹摇,可以在項(xiàng)目的任何一個(gè)組件中去獲取和修改来惧,修改可以得到全局響應(yīng)的變量

vue-cli2項(xiàng)目中安裝vuex,使用npm install vuex --save

安裝成功后隅居,在src目錄下新建一個(gè)store文件,里面創(chuàng)建一個(gè)js文件


image.png

在js文件中寫入:

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

Vue.use(Vuex)

const STORE = {
    
    state: {},
    
    getters: {},
    
    mutations: {},
    
    actions: {}
    
}

export default new Vuex.Store(STORE)

然后在main.js文件中引入 store 并注冊(cè)到 vue 實(shí)例中

import Vue from 'vue'
import App from './App.vue'
import store from './store' // 引入store

Vue.config.productionTip = false

new Vue({
  render: h => h(App),
  store,  // 注冊(cè)到實(shí)例中
}).$mount('#app')

vuex的文件配置到這里就完成了


現(xiàn)在再回去看store文件里的參數(shù),這幾個(gè)對(duì)象就是vuex五大核心:

State:可全局訪問的對(duì)象
Getter:和vue的computed一樣屿脐,用來實(shí)時(shí)監(jiān)聽state的值的變化(最新狀態(tài))
Mutation:存放改變state值的方法(同步)
Action:觸發(fā)mutations里面的方法(異步)
module:模塊


State

State是存儲(chǔ)在Vuex中的數(shù)據(jù)對(duì)象,和Vue實(shí)例中的data一樣佑钾。只不過State是可以全局訪問的烦粒。

定義stata對(duì)象扰她,直接在state里面定義 key:val徒役,它可以定義任意數(shù)據(jù)類型

    state: {
        name:'State',
        num: 1,
        arr: ["1","2","3"],
        obj: {
            ob1:'1',
            ob2:'2'
        },
        bool: true
    },

在頁面中獲取state的值 使用this.$store.state

    computed: {
        state() { return this.$store.state  }
    },
    mounted(){
        console.log(this.state)
    }

在這里state通常都是掛載到computed計(jì)算屬性上忧勿,這樣當(dāng)state的值發(fā)生改變的時(shí)候都能及時(shí)的響應(yīng)。
當(dāng)然也能用到 watch去監(jiān)聽

image.png

這樣就能獲取到在state中定義的數(shù)據(jù)

State中的輔助函數(shù) mapState
當(dāng)一個(gè)組件需要獲取多個(gè)狀態(tài)時(shí)候卸夕,將這些狀態(tài)都聲明為計(jì)算屬性會(huì)有些重復(fù)和冗余。為了解決這個(gè)問題贡羔,我們可以使用 mapState 輔助函數(shù)幫助我們生成計(jì)算屬性

    import Vue from 'vue'
    // 引入 mapState輔助函數(shù)
    import { mapState } from 'vuex'
    
    export default {
        computed:{
            // 使用對(duì)象展開運(yùn)算符將此對(duì)象混入到外部對(duì)象中
            ...mapState({
                name: state => state.name, // 獲取到state中的name
                num: state => state.num,   // 獲取到state中的num
                ArrObj: state => [state.arr,state.obj]  // 獲取到state中的 arr 和 obj
            })
        },
        mounted(){
            console.log('name:',this.name)
            console.log('num:',this.num)
            console.log('ArrObj:',this.ArrObj)
        },
    }

輸出


image.png

Getter

Vuex 允許我們?cè)?store 中定義getter(可以認(rèn)為是 store 的計(jì)算屬性)乖寒。就像計(jì)算屬性computed一樣楣嘁,getter 的返回值會(huì)根據(jù)它的依賴被緩存起來逐虚,且只有當(dāng)它的依賴值(state中的屬性)發(fā)生了改變才會(huì)被重新計(jì)算叭爱。

Getter的作用就是用來實(shí)時(shí)監(jiān)聽state的值的變化

定義Geters對(duì)象
使用 state作為其第一個(gè)參數(shù)
可以使用其他getter函數(shù)作為第二個(gè)參數(shù)

    state: {
        name:'State',
        num: 1,
        arr: ["1","2","3"],
        obj: {
            ob1:'1',
            ob2:'2'
        },
        bool: true
    },
    getters: {
        // 獲取state中的name 
        getName (state) { return state.name },  // 把state作為第一參數(shù)
        // 獲取state中的arr
        getArr: state => { return state.arr },
        // 獲取state中的obj
        getObj: state => { return state.obj },
        // 獲取getters中的 getArr 和 getObj
        getArrObj: (state,getters) => {        // 把getters作為第二參數(shù)
            return {
                "arr":getters.getArr,
                "obj":getters.getObj
            }
        }
    },

在頁面中使用getters买雾,使用this.$store.getters

        mounted(){
            console.log('Getters:',this.$store.getters)
            console.log('getArrObj:',this.$store.getters.getArrObj)
        }
image.png

Getters中的輔助函數(shù) mapGetters
mapGetters 輔助函數(shù)僅僅是將 store 中的 getter 映射到局部計(jì)算屬性:

    import Vue from 'vue'
    // 引入 mapGetters 輔助函數(shù)
    import { mapGetters } from 'vuex'
    
    export default {
        computed:{
            // 使用對(duì)象展開運(yùn)算符將此對(duì)象混入到外部對(duì)象中
            ...mapGetters([
                'getName',  // 獲取到 getters 中的 getName
                'getArr',   // 獲取到 getters 中的 getArr
                'getArrObj' // 獲取到 getArrObj 中的 getArrObj
            ])
        },
        mounted(){
            console.log('getName:',this.getName)
            console.log('getArr:',this.getArr)
            console.log('getArrObj:',this.getArrObj)
        },
    }

輸出


image.png

Mutation

更改 Vuex 的 store 中的狀態(tài)的唯一方法是提交 mutation嗤军。

使用 state 作為第一個(gè)參數(shù)

    state: {
        name:'State',
    },
    mutations: {
        newName(state){
            return state.name = 'newState';  // 改變state.name的值
        }
    },

使用 this.$store.commit('方法名') 觸發(fā)mutations中的方法

        mounted(){
            console.log('name改變前:',this.$store.state.name)

            this.$store.commit('newName') // 啟動(dòng)mutations

            console.log('name改變后:',this.$store.state.name)
        },

輸出


image.png

而第二參數(shù)官方解釋叫 提交載荷(Payload)
可以向 store.commit傳入額外的參數(shù)型雳,即 mutation 的 載荷(payload)

簡單來說就是可以在在第二參數(shù)里傳入額外的參數(shù)

這里還是用name來做例子

    state: {
        name:'State',
    },
    mutations: {
        newName(state,playload){
            // 傳入第二參數(shù)
            return state.name = playload; 
        }
    },
        mounted(){
            // commit傳入第二參數(shù)
            this.$store.commit('newName','哈哈哈哈')
            console.log('name修改后:',this.$store.state.name)
            
            this.$store.commit('newName',{'name':'啊啊啊啊','age':'116'})
            console.log('name修改后:',this.$store.state.name)
        },

輸出


image.png

在 Vuex 中,mutation 必須是同步函數(shù)


Action

Action 可以包含任意異步操作浪慌,Action的作用就是異步觸發(fā)Mutations

定義action對(duì)象
接收一個(gè)context參數(shù)和一個(gè)要變化的形參
contextstore實(shí)例具有相同的方法和屬性权纤,所以他可以執(zhí)行context.commit(""),也可以使用 context.statecontext.getters 來獲取 stategetters外邓。

    state: {
        name:'State'
    },
    mutations: {
        newName(state,playload){
            //傳入第二參數(shù)
            return state.name = playload; 
        }
    },
    actions: {
        actionName(context){
            // context的作用與組件上的this.$store作用一樣损话,但兩者還是會(huì)有區(qū)別
            return context.commit('newName',100000000) 
        }
    }

使用this.$store.dispatch("方法名")方法執(zhí)行Actions

        mounted(){
            console.log('name修改前:',this.$store.state.name)
            this.$store.dispatch("actionName")
            console.log('name修改后:',this.$store.state.name)
            
        },

輸出


image.png

同樣Action還支持載荷方法丧枪,傳入第二形參

    actions: {
        actionName(context,playload){
            return context.commit('newName',playload) 
        }
    }
        mounted(){
            console.log('name修改前:',this.$store.state.name)
            this.$store.dispatch("actionName","qazwsxedc")
            console.log('name修改后:',this.$store.state.name)  
        },

輸出


image.png

Module

其中 module 的作用是可以把 store 分割成模塊(module)拧烦,每個(gè)模塊擁有自己的 state恋博、mutation私恬、action、getter秦士、甚至是嵌套子模塊——從上至下進(jìn)行同樣方式的分割:

const MODULEA = {
    state: {},
    getters: {},
    mutations: {},
    actions: {}
}
const MODULEB = {
    state: {},
    getters: {},
    mutations: {},
    actions: {}
}

export default new Vuex.Store({
    modules: {
        storeA: MODULEA ,
        storeB: MODULEB 
    }
})

主要是為了解決由于使用單一狀態(tài)樹隧土,應(yīng)用的所有狀態(tài)會(huì)集中到一個(gè)比較大的對(duì)象。當(dāng)應(yīng)用變得非常復(fù)雜時(shí)曹傀,store 對(duì)象就有可能變得相當(dāng)臃腫皆愉。

簡單來說就是可以把vuex模塊化

?著作權(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

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

  • (1) 當(dāng)跨域請(qǐng)求報(bào)錯(cuò) Access-Control-Allow-Origin 訪問控制允許同源宅倒,有兩種辦法解決開...
    woow_wu7閱讀 1,772評(píng)論 1 13
  • 安裝 npm npm install vuex --save 在一個(gè)模塊化的打包系統(tǒng)中线召,您必須顯式地通過Vue.u...
    蕭玄辭閱讀 2,945評(píng)論 0 7
  • ### store 1. Vue 組件中獲得 Vuex 狀態(tài) ```js //方式一 全局引入單例類 // 創(chuàng)建一...
    蕓豆_6a86閱讀 732評(píng)論 0 3
  • 由于Vuex的官方文檔在各個(gè)模塊之間缺乏一些過渡,另外新概念很多,使得初讀時(shí)總有些云里霧里的感覺立轧。于是本文在官方文...
    一郭鮮閱讀 356評(píng)論 0 1
  • Vuex 是什么比伏? Vuex 是一個(gè)專為 Vue.js 應(yīng)用程序開發(fā)的狀態(tài)管理模式。它采用集中式存儲(chǔ)管理應(yīng)用的所有...
    skycolor閱讀 839評(píng)論 0 1