Vue核心概念Getter的使用方式

今天小編就為大家分享一篇關於Vue核心概念Getter的使用方法，寫的十分的全面細緻，具有一定的參考價值，對此有需要的朋友可以參考學習下。如有不足之處，歡迎批評指正。

有時候我們需要從store中的state中派生出一些狀態。

如果有多個組件需要用到此屬性，我們要麼複製這個函數，或者抽取到一個共享函數然後在多處導入它——無論哪種方式都不是很理想。

Vuex 允許我們在store中定義getter屬性（可以認為是 store 的計算屬性）。就像計算屬性一樣，getter 的返回值會根據它的依賴被緩存起來，且只有當它的依賴值發生了改變才會被重新計算。

比如這裡我們在Page4.vue裡面需要對商品價格加倍，我們就可以使用Getter。

使用Getter

store.js，我們在state下面加入getters裡面有一個商品價格加倍的方法。

// 在分離出來的vuex文件中安裝 Vuex 
import Vue from 'vue'
import Vuex from 'vuex'
Vue.use(Vuex) 
// 每一個Vuex倉庫中只能包含一個store實例
export const store = new Vuex.Store({ 
 state: { // 把頁面顯示數據寫在store.js文件 
 goodsList: [ 
 { name: '贛州橙子', price: '8.8' }, 
 { name: '新疆哈密瓜', price: '2.0' },  

 { name: '山東大棗', price: '3.2' }, 
 { name: '陽澄湖大閘蟹', price: '10.0' } 
 ] 
 },
 // getters是vuex中的計算屬性對象
 getters: {
 //商品價格加倍;其中goodsPriceDoubble(state)中有一個state參數表示state中的數據對象
 goodsPriceDoubble: state => {
 let goodsPriceDoubble = state.goodsList.map(currentValue => {
 return {
 name: currentValue.name,
 price: currentValue.price *2
 }
 })
 return goodsPriceDoubble;
 }
 }
})

在page4.vue裡面修改成如下：

 

 
商品：{{item.name}}

 
價格：￥{{item.price}}

 


在computed中加入如下方法：
computed: {
 goodsPriceTwo() {
 //this.$store.getters.vuex getters中的對應的回調函數的函數名
 return this.$store.getters.goodsPriceDoubble; 

 }
}
顯示效果就是page4的商品價格加倍了。

 

結語
感謝您的觀看，如有不足之處，歡迎批評指正。
對前端的技術，前端全棧技術感興趣的同學關注我的頭條號，並在後臺私信發送關鍵字：“前端”即可獲取免費的前端開發攻城師學習資料
知識體系已整理好，歡迎免費領取。還有視頻分享可以免費獲取。關注我，可以獲得沒有的經驗哦！
 

                

            

            
            
            
            
            
            
            
            
            
            
            

            



分享到:



 閱讀更多  前端攻城小牛 
的文章

關鍵字:
技術
方式
函數