VUEX 使用學習五 : getter

香吧香發表於2023-01-30

轉載請註明出處:

  Getter對Store中的資料進行加工處理形成新的資料。他不會修改state中的原始資料,起到的是包裝資料的作用;

  有時我們需要從 store 中的 state 中派生出一些狀態,例如對列表進行過濾並計數

  如果有多個元件需要用到此屬性,我們要麼複製這個函式,或者抽取到一個共享函式然後在多處匯入它(無論哪種方式都不是很理想)。getter就是為了解決這個問題而產生的。

應用場景:

  1. 相當於state的計算屬性(基於State處理成另外一份資料)
  2. 模板中需要的資料和State中的資料不完全一樣;需要基於state中的資料進行加工處理,形成一份新的的資料,給模板使用

特點:

  1. Getter 可以對Store中已有的資料加工處理之後形成新的資料,類似Vue的計算屬性。

  2. Store 中資料發生變化,Getter 的資料也會跟著變化。

  3. getters不會修改state中的資料

使用:

  1.第一 種方式:this.$store.getters.名字 是呼叫getters第一 種方式

//元件中呼叫
 {{$store.getters.計算屬性名}}                      // 不分模組
 {{this.$store.getters['模組名/計算屬性名']}}       // 分模組
 
 //store.js中定義
   getters: {
    showNum (state){
      return `當前最新的資料${state.count}`
    }
  }
  1. 透過以函式對映的方式

// 1.從vuex中按需求匯入mapState函式
import {maptGetters} from 'vuex'
// 透過剛才匯入的mapState函式,將當前元件需要的全域性資料,對映為當前元件的computed計算屬性

// 2. 將指定的mutations函式,對映為當前元件的methods函式 computed :{ ...maptGetters(['showNum']) // 不分模組 ...mapGetters(['計算屬性名']) // 分模組,不重新命名計算屬性 ...mapGetters('模組名', ['計算屬性名']) }
// 3.直接使用mapGeterrs中宣告的屬性

   

    在網上找到一個demo 示例,可參考學習: https://gitee.com/xiangbaxiang/vue-store