VUEX 使用學習五 : getter

香吧香發表於2023-01-30
Vue

轉載請註明出處：

　　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

 

相關文章