vuex 中輔助函數mapGetters的基本用法詳解

更新時間：2021年07月07日 15:01:48 作者：只爭朝夕，不負韶華

mapGetters輔助函數僅僅是將 store 中的 getter 映射到局部計算屬性，在組件或界面中不使用mapGetter調用映射vuex中的getter，在組件或界面中使用mapGetter調用映射vuex中的getter，具體內容跟隨小編一起通過本文學習吧　

mapGetters輔助函數

mapGetters輔助函數僅僅是將 store 中的 getter 映射到局部計算屬性：

1、在組件或界面中不使用mapGetter調用映射vuex中的getter　　

1.1 調用映射根部store中的getter

<!-- test.vue -->
<template>
  <div class="vuexReponse">
    <div @click="changeVal">點擊</div>
    <div>"stateHello： "{{stateHello}}</div>
    <div>"gettersHello： "{{gettersHello}}</div>
  </div>
</template>
<script>
export default {
  watch: {
    gettersHello(newVal, oldVal) {
      console.log("gettersHello newVal", newVal);
      console.log("gettersHello oldVal", oldVal);
    }
  },
  computed: {
    stateHello() {
      return this.$store.state.stateHello
    },
    gettersHello() {
      return this.$store.getters.gettersHello
    }
  },
  methods: {
    changeVal() {
      this.$store.commit("mutationsHello", 2)
    }
  }
}
</script>

/**
 * store.js
 */
import Vue from 'vue'
import Vuex from 'vuex'

Vue.use(Vuex)
export default new Vuex.Store({
  state: {
    stateHello: 1
  },
  getters: {
    gettersHello: (state) => {
      return state.stateHello * 2
    }
  },
  mutations: {
    mutationsHello(state, val) {
      console.log("val", val); // 2
      state.stateHello += val
    }
  },
})

　　流程：在test.vue 界面中點擊調用changeVal(), changeVal方法通過commite 傳參val 并調用 store.js中的mutationsHello() 方法，mutationsHello方法修改state中的stateHello的值，在getters 的 gettersHello 中監(jiān)聽stateHello的值，stateHello的值的改變觸發(fā)了gettersHello，在test.vue界面computed 中計算了 store.getters.gettersHello ,這個就將gettersHello 映射到 store.gettes.gettersHello 的值，通過模板將gettersHello 渲染到dom中，同時由于gettersHello 的改變也能觸發(fā)watch中gettersHello，實現對store.getters.gettersHello 數據改變的監(jiān)聽。

　　1.2 調用映射modules模塊store中的getter

<!-- moduleTest.vue -->
<template>
  <div class="vuexReponse">
    <div @click="changeVal">點擊</div>
    <div>stateHello： {{stateHello}}</div>
    <div>gettersHello： {{gettersHello}}</div>
  </div>
</template>

<script>
export default {
  watch: {
    gettersHello(newVal, oldVal) {
      console.log("gettersHello newVal", newVal);
      console.log("gettersHello oldVal", oldVal);
    }
  },
  computed: {
    stateHello() {
      return this.$store.state.vuexTest.stateHello
    },
    gettersHello() {
      return this.$store.getters['vuexTest/gettersHello']
    }
  },
  methods: {
    changeVal() {
      this.$store.commit("vuexTest/mutationsHello", 2)
    }
  }
}
</script>

/**
 * 模塊 vuexTest.js
 */
export default {
    namespaced: true,
    state: {
        stateHello: 1,
    },
    getters: {
        gettersHello: (state, getters, rootState, rootGetters) => {
            console.log("state", state);
            console.log("getters", getters);
            console.log("rootState", rootState);
            console.log("rootGetters", rootGetters);
            return state.stateHello * 2
        }
    },
    mutations: {
        mutationsHello(state, val) {
            console.log("1111");
            console.log("val", val);
            state.stateHello += val
        }
    },
    actions: {

    }
}

　　需要注意的地方是在 computed 中計算映射模塊中的getters 的方法時調用方式與獲取模塊中的state 中的數據不同

this.$store.getters['vuexTest/gettersHello']

2、在組件或界面中使用mapGetter調用映射vuex中的getter　　

2.1 調用映射根部store中的getter

/**
 * store.js
 */
 import Vue from 'vue'
 import Vuex from 'vuex'
 
 Vue.use(Vuex)
 export default new Vuex.Store({
   state: {
     stateHello: 1
   },
   getters: {
     gettersHello: (state) => {
       return state.stateHello * 2
     }
   },
   mutations: {
     mutationsHello(state, val) {
       state.stateHello += val
     }
   },
 })

<!-- Test.vue -->
<template>
  <div class="vuexReponse">
    <div @click="changeVal">點擊</div>
    <div>stateHello： {{stateHello}}</div>
    <div>gettersHello： {{gettersHello}}</div>
    <div>gettersHelloOther {{gettersHelloOther}}</div>
  </div>
</template>

<script>
import { mapGetters } from "vuex";
export default {
  name: "vuexReponse",
  components: {

  },
  data() {
    return {

    }
  },
  watch: {
    gettersHello(newVal, oldVal) {
      console.log("gettersHello newVal", newVal);
      console.log("gettersHello oldVal", oldVal);
    }
  },
  computed: {
    stateHello() {
      return this.$store.state.stateHello
    },
    ...mapGetters(["gettersHello"]), // 數組形式
    ...mapGetters({   // 對象形式 
      gettersHello: "gettersHello"
    }),
    ...mapGetters({
      gettersHelloOther: "gettersHello" // 對象形式下 改變映射
    }),
  },
  methods: {
    changeVal() {
      this.$store.commit("mutationsHello", 2)
    }
  }
}
</script>

　　2.2 調用映射根部store中的getter

/**
 * vuexTest.js
 */
 export default {
    namespaced: true,
    state: {
        stateHello: 1,
    },
    getters: {
        gettersHello: (state, getters, rootState, rootGetters) => {
            console.log("state", state);
            console.log("getters", getters);
            console.log("rootState", rootState);
            console.log("rootGetters", rootGetters);
            return state.stateHello * 2
        }
    },
    mutations: {
        mutationsHello(state, val) {
            console.log("1111");
            console.log("val", val);
            state.stateHello += val
        }
    },
    actions: {

    }
}

<!-- module test.vue -->
<template>
  <div class="vuexReponse">
    <div @click="changeVal">點擊</div>
    <div>stateHello： {{stateHello}}</div>
    <div>gettersHello： {{gettersHello}}</div>
    <div>gettersHelloOther {{gettersHelloOther}}</div>
  </div>
</template>

<script>
import { mapGetters } from "vuex";
export default {
  name: "vuexReponse",
  watch: {
    gettersHello(newVal, oldVal) {
      console.log("gettersHello newVal", newVal);
      console.log("gettersHello oldVal", oldVal);
    }
  },
  computed: {
    stateHello() {
      return this.$store.state.vuexTest.stateHello
    },
    ...mapGetters(["vuexTest/gettersHello"]), // 數組形式
    ...mapGetters("vuexTest", {   // 對象形式 
      gettersHello: "gettersHello"
    }),
    ...mapGetters("vuexTest", {
      gettersHelloOther: "gettersHello" // 對象形式下 改變映射
    }),
  },
  methods: {
    changeVal() {
      this.$store.commit("vuexTest/mutationsHello", 2)
    }
  }
}
</script>

這三種形式
　　...mapGetters(["vuexTest/gettersHello"]), // 數組形式
    ...mapGetters("vuexTest", {   // 對象形式 
      gettersHello: "gettersHello"
    }),
    ...mapGetters("vuexTest", {
      gettersHelloOther: "gettersHello" // 對象形式下 改變映射
    }),

到此這篇關于vuex 中輔助函數mapGetters的基本用法詳解的文章就介紹到這了,更多相關vuex mapGetters使用內容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關文章希望大家以后多多支持腳本之家！

您可能感興趣的文章:

詳解Vue-Cli 異步加載數據的一些注意點
本篇文章主要介紹了詳解Vue-Cli 異步加載數據的一些注意點，小編覺得挺不錯的，現在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧
2017-08-08
Vue中的路由導航守衛(wèi)導航解析流程
這篇文章主要介紹了Vue中的路由導航守衛(wèi)導航解析流程,正如其名，vue-router 提供的導航守衛(wèi)主要用來通過跳轉或取消的方式守衛(wèi)導航。這里有很多方式植入路由導航中：全局的，單個路由獨享的，或者組件級的
2023-04-04
Vue2.x響應式簡單講解及示例
這篇文章主要介紹了Vue2.x響應式及簡單的示例，應用了簡單的源代碼進行講解，感興趣的小伙伴可以參考一下，希望可以幫助到你
2021-08-08
vue-cli axios請求方式及跨域處理問題
這篇文章主要介紹了vue-cli axios請求方式及跨域處理問題,文中還給大家提到了vue中axios解決跨域問題和攔截器使用，非常不錯，具有參考借鑒價值，需要的朋友參考下吧
2018-03-03
vue輪詢請求解決方案的完整實例
項目開發(fā)中需要做一個輪詢,所以將實現的過程記錄了一下,下面這篇文章主要給大家介紹了關于vue輪詢解決方案的相關資料,需要的朋友可以參考下
2021-07-07
vue中watch監(jiān)聽不到變化的解決
本文主要介紹了vue中watch監(jiān)聽不到變化的解決，文中通過示例代碼介紹的非常詳細，對大家的學習或者工作具有一定的參考學習價值，需要的朋友們下面隨著小編來一起學習學習吧
2023-01-01
Vue 3.0中Treeshaking特性及作用
Tree shaking 是一種通過清除多余代碼方式來優(yōu)化項目打包體積的技術,就是在保持代碼運行結果不變的前提下,去除無用的代碼,本文給大家介紹Vue 3.0中Treeshaking特性是什么,感興趣的朋友一起看看吧
2023-10-10
Vue入門之數據綁定(小結)
本篇文章主要介紹了探索Vue高階組件的使用，小編覺得挺不錯的，現在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧
2018-01-01
Vue如何整合mavon-editor編輯器(markdown編輯和預覽)
這篇文章主要介紹了Vue整合mavon-editor編輯器(markdown編輯和預覽)的相關知識，mavon-editor是目前比較主流的markdown編輯器，重點介紹它的使用方法,需要的朋友可以參考下
2022-10-10
Vue模板語法v-bind教程示例
這篇文章主要為大家介紹了Vue模板語法v-bind教程示例,有需要的朋友可以借鑒參考下,希望能夠有所幫助,祝大家多多進步,早日升職加薪
2023-12-12