Vue是一個受歡迎的JavaScript框架，它使用getter和setter來追蹤數據的變化。 在Vue中定義getter是定義一個計算而成的屬性的理想方法。 這些getter非常有用，特別是當我們需要渲染來自不同路由的數據時。

然而，雖然Vue的getter非常強大，但有時我們會遇到一些奇怪的行為，特別是在使用getter時出現奇怪的bug。

export default {
computed: {
filteredItems() {
return this.items.filter(item =>item.done === this.selected);
},
numOfItems() {
return this.filteredItems.length;
}
},
getters: {
getNumOfItems(state) {
return state.items.length;
},
getFilteredItems(state) {
return state.items.filter(item =>item.done === state.selected);
},
getNumOfFilteredItems(state, getters) {
return getters.getFilteredItems.length;
}
}
}

在這個代碼塊中，我們有三個getter：getNumOfItems，getFilteredItems和getNumOfFilteredItems。 getNumOfFilteredItems是根據getFilteredItems和getNumOfItems來計算的。

但是，當我們運行這個代碼塊時，我們會注意到getNumOfFilteredItems getter不起作用。 它返回0，而不是預期的奇數數字。

為什么會這樣呢？ 原因是我們沒有在getNumOfFilteredItems中傳遞參數。 因此，filteredItems和numOfItems將始終保持默認值。

getters: {
getNumOfFilteredItems(state, getters) {
// missing () on the end of each getter
return getters.getFilteredItems().length; // notice () here
}
 }

為了解決問題，我們只需要像將filteredItems和numOfItems中的響應式對象一樣，通過加上括號來調用getter方法：

在Vue中，getter是一個非常有用的概念，但我們需要記住正確使用它們，以避免出現問題。