vue3VueX中的計算屬性getters

在vuex中使用計算屬性，如在stre文件夾下的index.js里

 

 使用getters

 

 然后在要調用vuex的頁面里面直接調用這個方法就可，得到這個結果

 

 這是獲取每個自乘的值

把數組里的每一項相加，獲得總價要這樣寫

 

 使用過濾，然后把這個方法返回給要調用的頁面

 

 計算屬性的方法怎么調用其它方法

 

 這里我寫了一個返回小於20價格的方法，如果我們要計算小於20的總價

可以改造剛才的計算總價

    totalprice(state,getters){
      return getters.goodsnum.reduce((s,n)=>s+n.price,0); //
    },
      
    //getters是我們現在使用的計算屬性，里面包含了所以已經寫了的方法可以調用
    //state是在Vuex里聲明的變量

　　我們可以在括號里調用getters使用其方法

 

 如果我們要定義小於多少或大於多少的總價可以把n.price<20的20換成一個變量，但調用的方法只能傳兩個參數

我們可以這樣寫

 

 在方法里傳入要小於或大於30價格的書

    goodsself(state,getters){
      return function(price){ //可以自定義參數
        return state.cartList.filter(n => n.price <price)
      }
      // return price => state.cartList.filter(n => n.price <price)    
      //另一種寫法
    },    

可以在方法寫再返回一個方法接收我們傳入的參數30