【Vue】vuex的getters mapState mapGetters mapMutations mapActions的使用

一、getters?

二、 mapState

三、 mapGetters

四、 mapMutations

五、 mapActions

學到這兒來個小總結：四個map方法的使用

總結不易~ 本章節對我有很大的收獲，希望對你也是！！！

?本節素材已上傳至Gitee：yihaohhh/我愛Vue - Gitee.comhttps://gitee.com/liu-yihao-hhh/i-love---vue/tree/master/25_src_%E6%B1%82%E5%92%8C%E6%A1%88%E4%BE%8B_getters

通過前面介紹的vuex功能還是十分強大，但是對于模板中有很多不同需求的話，我們就不要自己來寫js表達式了，當功能過于復雜，我們就要封裝一個容器來進行存儲這個功能

就比如模板要將當前求和放大10倍

    <h1>當前求和為：{{ $store.state.sum }}</h1><h3>放大10倍的和：{{ $store.state.sum * 10 }}</h3>

這里功能開始變得復雜，那么就可以考慮是不是可以封裝到計算屬性里面呢？computed

  <h3>放大10倍的和：{{ dahe()}}</h3>computed: {dahe() {return this.$store.state.sum * 10}},

但是這里就有一個問題，這個方法就只能自己組件里面使用，不能讓組件之間進行共享，所以這里就引入了新的vuex配置項，getters?

一、getters?

// 準備getters——用于將state里面的數據進行加工
const getters = {bigSum(state) {return state.sum * 10}
}// 創建 并 暴露store
export default new Vuex.Store({actions,mutations,state,getters
})

在vuex里面進行創建getters，然后實現你要完成的方法，并且將getters引入store中

那么怎么引入getters的數據到模板中呢？

我將sum修改成1好進行觀察

// 準備state——用于存儲數據
const state = {sum: 1
}

利用生命周期掛載輸出MyCount里面的$store

能夠看到我們實現的bigSum函數值為10，那么獲取就可以直接在模板中訪問我們想要得到的值

    <h3>放大10倍的和：{{ $store.getters.bigSum }}</h3>

所以getters就是拿著數據源里面的數據進行加工然后再給你返回加工后的值。由此，state像極了data，而getters像極了computed計算屬性

回到MyCounst組件中，我們發現一遍遍的書寫$store.state.……實在是過于麻煩，我們的終極目標就是只寫sum、bigSum、school、subject

那有一種辦法就是利用計算屬性，可以實現：這樣就解釋了sum并不是函數名，而是一個計算屬性

    <h1>當前求和為：{{ sum }}</h1><h3>放大10倍的和：{{ bigSum }}</h3><h3>我在{{ school }}，學習{{ subject }}</h3>computed: {sum: function asdhaksdjaslkdjasdkalskdl() {return this.$store.state.sum},school() {return this.$store.state.school},subject() {return this.$store.state.subject},bigSum() {return this.$store.getters.bigSum},},

但是！不出意外的話就要出意外了！你不覺得這些計算屬性里面的函數值都很類似嗎？也同樣是return this.$store.state……,有沒有什么方法可以直接寫一個test函數，然后生成return this.$store.state這么一段，讓我們直接進行調用呢！！

有的兄弟有的！Vue的設計者也想到了這一點，就給我們設計好了mapState

??本節素材已上傳至Gitee：yihaohhh/我愛Vue - Gitee.comhttps://gitee.com/liu-yihao-hhh/i-love---vue/tree/master/26_src_%E6%B1%82%E5%92%8C%E6%A1%88%E4%BE%8B_mapState%E5%92%8CmapGetters

二、 mapState

import { mapState } from 'vuex'

我修改掉函數名，只是想證明函數名跟配對的屬性值是一組，好讓mapState工作的時候進行映射能看看清楚是同一組數據在進行映射?

  mounted() {const x = mapState({'he':'sum'})console.log(x)}

由于mapState是要求傳入的對象，那么就是key-value進行配對，那么key值永遠都是一個字符串，可以用簡寫形式，但是value卻不行，如果value就寫成sum，他就會去尋找sum這個變量，但是我們的sum是一個屬性名啊，也是一個字符串，所以sum要加上引號，讓他是一個字符串

  mounted() {const x = mapState({he:'sum', xuexiao:'school', xueke:'subject'})console.log(x)}

但是這里引入mapState確保錯了！這里就要考es6的基本功怎么樣了

由于對象里面是不能直接寫對象的，否則就會報錯

那么我們要是有個obj2也是對象，怎么添加到obj里面呢？

    let obj2 = { x: 100, y: 200 }let obj = {a: 1,b: 2,...obj2}

寫成...obj2就不會報錯了，這樣就是默認將obj里面的元素合并到obj里面！

所以，你看清楚mapState在控制臺中是一個對象！而computed計算屬性也是一個對象，就不能直接放在computed里面而是要加...mapState才是能夠將當前的mapState對象里面的值合并到computed里面！

  computed: {// 借助mapState生成計算屬性， 從state中讀取數據 （對象寫法）...mapState({he:'sum', xuexiao:'school', xueke:'subject'})},

此時的computed計算屬性里面就相當于，我寫了那么多一長串的代碼，頁面仍然更新正常，怎么是不是超級方便！

唯一的不一樣就是用mapState生成出來的計算屬性，又單獨在開發者工具里面多開一行，是隸屬于計算屬性的一欄，告訴開發者是你利用mapState來生成的一堆綁定數據

這里就先回到最初的命名規則

    ...mapState({sum:'sum', school:'school', subject:'subject'}),

那么就一定有人說，啊呀！可以用es6簡寫辦法!

    ...mapState({sum, school:'school', subject:'subject'}),

現在可以看到，當前的sum就會被Vue解析成sum: sum, 仍然會遇到上面那個問題，變成key-value值，上面的sum會被解析成'sum' 但是后面那個sum會被去尋找sum變量，找不到而報錯

那么另一種數組寫法，就是采用mapState映射的關系告訴Vue，你這個計算屬性的名字是叫'sum'，是從'sum'這個?state的sum屬性中來得到的數據，所以這里的命名就必須要跟state的屬性名字一模一樣，不能在跟上面he作為計算屬性！！！

  computed: {// 數組寫法...mapState(['sum', 'school', 'subject']),},

三、 mapGetters

所以下面還有一個從getters里面取到的值也是一樣的獲取效果

import { mapState, mapGetters } from 'vuex'// 對象寫法...mapGetters({bigSum:'bigSum'})//數組寫法...mapGetters(['bigSum'])

yihaohhh/我愛Vue - Gitee.comhttps://gitee.com/liu-yihao-hhh/i-love---vue/tree/master/27_src_%E6%B1%82%E5%92%8C%E6%A1%88%E4%BE%8B_mapMutations%E5%92%8CmapActions??本節素材已上傳至Gitee：yihaohhh/我愛Vue - Gitee.comhttps://gitee.com/liu-yihao-hhh/i-love---vue/tree/master/27_src_%E6%B1%82%E5%92%8C%E6%A1%88%E4%BE%8B_mapMutations%E5%92%8CmapActions

四、 mapMutations

學懂了上面的計算屬性，后面還有兩個就好理解了！對于commit提交事件也是這么寫，進行引入mapMutations

import { mapState, mapGetters, mapMutations } from 'vuex' methods: {// increment() {//   this.$store.commit('JIA', this.n)// },// decrement() {//   this.$store.commit('JIAN', this.n)// },...mapMutations({increment:'JIA', decrement:'JIAN'}),

但是當我點擊+ 卻報錯了，而'JIA'卻別調用了！?

回到vuex里面觀察是不是傳入值value錯誤了

// 準備mutations——用于操作數據（state）
const mutations = {JIA(state, value) {console.log(value)console.log('mutations被調用了')state.sum += value},JIAN(state, value) {state.sum -= value}
}

是一個鼠標點擊事件，說明就是value傳值錯誤！?

原因就是，原本我們自己寫的increment函數里面是自己帶this.n的參數進行傳入mutations來進行接收，但是我們用mapMutations寫后，就沒有傳入參數給他接收，那么就是默認參數event被傳入

那么只要我們在模板里面調用函數的時候傳參就歐克啦~

    <button @click="increment(n)">+</button><button @click="decrement(n)">-</button>data() {return {n:1, // 用戶當前選擇的數字}},methods: {// increment() {//   this.$store.commit('JIA', this.n)// },// decrement() {//   this.$store.commit('JIAN', this.n)// },// 借助mapMutations生成對應的方法， 方法中會調用commit去聯系mutations// 對象的寫法...mapMutations({increment:'JIA', decrement:'JIAN'}),},

數組寫法

    // 數組的寫法...mapMutations(['JIA', 'JIAN']),// 同樣 模板里面的調用方法得改<button @click="JIA(n)">+</button><button @click="JIAN(n)">-</button>

這里要與vuex里面的mutations里面實現的方法一致

// 準備mutations——用于操作數據（state）
const mutations = {JIA(state, value) {console.log('mutations被調用了')state.sum += value},JIAN(state, value) {state.sum -= value}
}

五、 mapActions

還有最后一步，引入mapActions?

import { mapState, mapGetters, mapMutations, mapActions } from 'vuex'// incrementOdd() {//   this.$store.dispatch('jiaOdd', this.n)// },// incrementWait() {//   this.$store.dispatch('jiaWait', this.n)// }// 對象寫法...mapActions({incrementOdd: 'jiaOdd', incrementWait: 'jiaWait'})// 同樣是要對調用進行傳參<button @click="incrementOdd(n)">當前求和為奇數再加</button><button @click="incrementWait(n)">等一等再加</button>

數組寫法

    ...mapActions(['jiaOdd', 'jiaWait'])// 同樣對函數名的調用就要修改了， 因為數組寫法就會生成同名的函數名和調用屬性<button @click="jiaOdd(n)">當前求和為奇數再加</button><button @click="jiaWait(n)">等一等再加</button>

學到這兒來個小總結：四個map方法的使用

mapState方法：用于幫助我們映射state中的數據為計算屬性

  computed: {//借助mapState生成計算屬性：sum、school、subject（對象寫法）...mapState({sum:'sum',school:'school',subject:'subject'}),//借助mapState生成計算屬性：sum、school、subject（數組寫法）...mapState(['sum','school','subject']),},

mapGetters方法：用于幫助我們映射getters中的數據為計算屬性

  computed: {//借助mapGetters生成計算屬性：bigSum（對象寫法）...mapGetters({bigSum:'bigSum'}),?//借助mapGetters生成計算屬性：bigSum（數組寫法）...mapGetters(['bigSum'])},

mapActions方法：用于幫助我們生成與actions對話的方法，即：包含$store.dispatch(xxx)的函數

  methods:{//靠mapActions生成：incrementOdd、incrementWait（對象形式）...mapActions({incrementOdd:'jiaOdd',incrementWait:'jiaWait'})?//靠mapActions生成：incrementOdd、incrementWait（數組形式）...mapActions(['jiaOdd','jiaWait'])}

mapMutations方法：用于幫助我們生成與mutations對話的方法，即：包含$store.commit(xxx)的函數

  methods:{//靠mapActions生成：increment、decrement（對象形式）...mapMutations({increment:'JIA',decrement:'JIAN'}),//靠mapMutations生成：JIA、JIAN（對象形式）...mapMutations(['JIA','JIAN']),}