Getter是Vue中一個非常簡單但卻很有用的特性。在Vue中,我們通過getter來獲取計算屬性的值。這意味著我們可以在獲取計算屬性的值時執行特定的操作,例如過濾或轉換數據。
// Vue組件中使用getter示例 export default { computed: { fullName() { return `${this.firstName} ${this.lastName}` }, reversedName() { return this.fullName.split('').reverse().join('') } } }
如上所示,我們可以在計算屬性中使用getter函數來獲取計算屬性的值。在這個例子中,我們有兩個計算屬性:fullName和reversedName。fullName屬性使用了簡單的函數將名字和姓氏連接起來,而reversedName屬性則使用了一個getter函數,在獲取fullName的值時,將名字和姓氏翻轉過來。
Getter不僅僅可以用在計算屬性中,我們也可以在Vue的store模塊中使用getter。在store模塊中,getter允許我們獲取狀態的值,并在獲取狀態時進行轉換和過濾等操作。
// Vue store模塊中使用getter示例 const exampleModule = { state: { name: 'vue.js', version: '3.0.0' }, getters: { nameWithVersion(state) { return `${state.name} v${state.version}` } } }
在上面的例子中,我們定義了一個示例module,在getter中定義了一個名為nameWithVersion的getter函數。與在計算屬性中一樣,getter函數返回的是需要被獲取的值,并在獲取值時執行特定的操作,例如在這個例子中,我們將name和version拼接成一個帶有版本號的字符串。現在,我們可以通過在Vue組件中使用mapGetter來獲取這個getter函數返回的值:
// 在Vue組件中獲取store模塊中的getter的值示例 <template> <p>當前版本號為: {{ nameWithVersion }}</p> </template> <script> import { mapGetters } from 'vuex' export default { computed: { ...mapGetters('exampleModule', ['nameWithVersion']) } } </script>
現在我們可以在Vue組件中使用上面的示例來獲取例子module的nameWithVersion getter函數返回的值。使用上述實例中的mapGetter函數,我們可以將getter函數映射到組件的計算屬性中。
Getter是Vue中一個強大且非常好用的特性。我們可以使用getter對數據進行轉換,過濾,和計算等操作。Getter不僅可以用在Vue組件中的計算屬性中,還可以用在store模塊中,通過mapGetters函數來獲取狀態的值。