在Vue中，我們經常會遇到需要獲取組件中某些數據的情況，這就需要使用到getters。getters可以對組件中的數據進行計算和篩選，相當于Vue版本的計算屬性。

下面是一個簡單的例子，展示了如何在Vue組件中使用getters：

<template>
<div>
<p>當前書籍數目： {{ bookCount }}</p>
<p>當前可借書籍數目： {{ availableBookCount }}</p>
</div>
</template>
<script>
export default {
data() {
return {
books: [
{ title: 'Vue.js入門', author: '張三', borrowed: true },
{ title: 'JavaScript高級編程', author: '李四', borrowed: false },
{ title: 'CSS世界', author: '王五', borrowed: true }
]
}
},
getters: {
bookCount: state =>state.books.length,
availableBookCount: state =>state.books.filter(book =>!book.borrowed).length
}
}
</script>

在這個例子中，我們有一個books數組，它包含三本書的信息。我們想要展示當前書籍數目和可借書籍數目，這就需要使用到getters。在Vue的options中，我們可以定義一個getters對象，里面包含我們需要使用的計算屬性。在這個例子中，我們定義了兩個計算屬性：bookCount和availableBookCount，它們分別計算了books數組的長度和可借的書籍數量。在template模板中，我們可以像使用普通的data屬性一樣使用這些計算屬性。

總結一下，getters是Vue中的一個非常有用的特性，它可以幫助我們對組件中的數據進行計算和篩選，從而展示出有意義的信息。如果你還沒有使用過getters，趕快試一下吧！