手把手教你使用 Vue3 中的 Composition API 來封裝一個商品列表組件
本文我們將使用 Composition API
來封裝一個商品列表組件,功能分爲兩塊邏輯:列表查詢和按商品名稱過濾,涉及到新的 API
有 setup
中的 ref
、onMounted
、watch
、computed
,看完後你將掌握 Composition API
的基本用法。
爲什麼使用 composition API 封裝組件?
-
當組件越來越龐大時,組件內的代碼邏輯也越來越混雜,導致後期維護困難,使用
Composition API
可以將組件內的各個業務邏輯分離開。 -
分離開的代碼邏輯點可以複用,比如獲取商品列表代碼邏輯片段可以在任何組件中去複用。
-
使用
Composition API
編寫的代碼更易讀,邏輯點清晰,更方便後面接手開發者維護。
setup 方法是什麼?
簡而言之,setup
就是用來整合各個代碼邏輯片段的容器,在這裏聲明所有的響應式屬性、計算屬性、watchers
和生命週期鉤子,然後暴露出去,在其它組件中使用。
WARNING:由於在執行
setup
時尚未創建組件實例,因此在setup
選項中沒有this
。這意味着,除了props
之外,你將無法訪問組件中聲明的任何屬性——本地狀態、計算屬性或方法。
開始吧
我們先將列表查詢和按名字過濾兩端代碼邏輯都寫在 setup
中,最後再做拆分重組至新組件使用。
商品列表邏輯
1、ref
首先我們用 ref
創建一個商品列表
import { ref } from 'vue'
setup () {
const goodsList = ref([])
}
ref
對我們的值創建了一個響應式引用,類似於
data() {
return {
goodsList: {
value: []
}
}
}
2、props
我們調用獲取商品列表接口需要知道是哪個用戶調用的,所以需要一個參數 user
,從外部傳入,props
接收
import { ref } from 'vue'
import { fetchGoodsList } from '@/api/fetchGoodsList'
setup (props) {
const goodsList = ref([])
const getGoodsList = async () => {
goodsList.value = await fetchGoodsList(props.user)
}
// 將商品列表和數據獲取方法暴露出去
return {
goodsList,
fetchGoodsList
}
}
3、onMounted
onMounted
類似於我們以往使用的生命週期鉤子函數 mounted
,簡單來說就是 setup
中的鉤子函數,我們用此函數來調用 getGoodsList
方法獲取商品列表。
import { ref, onMounted } from 'vue'
import { fetchGoodsList } from '@/api/fetchGoodsList'
setup (props) {
const goodsList = ref([])
const getGoodsList = async () => {
goodsList.value = await fetchGoodsList(props.user)
}
onMounted(getGoodsList)
return {
goodsList,
getGoodsList
}
}
4、watch
在使用 watch
之前我們先要了解 toRefs
,該函數就是爲了確保我們的偵聽器能夠對 user prop
所做的更改做出反應。
watch
也就是 setup
中的監聽器,和以往使用的 wacth
一樣
watch(user, (newValue, oldValue) => {})
import { ref, onMounted, toRefs, watch } from 'vue'
import { fetchGoodsList } from '@/api/fetchGoodsList'
setup (props) {
// 使用 `toRefs` 創建對prop的 `user` property 的響應式引用
const { user } = toRefs(props)
const goodsList = ref([])
const getGoodsList = async () => {
goodsList.value = await fetchGoodsList(user.value) // 注意這裏的 props.user 改爲了 user.value
}
onMounted(getGoodsList)
// 監聽 user 變化
watch(user, getGoodsList)
return {
goodsList,
getGoodsList
}
}
至此,獲取商品列表的邏輯點寫完了。
商品過濾邏輯
接下來就是商品列表按商品名稱進行過濾了,定義名稱搜索變量 goodsName
,寫入搜索方法 searchByGoodsName
,這裏我們使用到 computed
方法,和以前使用的 computed
用法也基本一致。
import { ref, onMounted, toRefs, watch } from 'vue'
import { fetchGoodsList } from '@/api/fetchGoodsList'
setup (props) {
const { user } = toRefs(props)
const goodsList = ref([])
const getGoodsList = async () => {
goodsList.value = await fetchGoodsList(user.value)
}
onMounted(getGoodsList)
watch(user, getGoodsList)
// 商品過濾邏輯
const goodsName = ref('')
const searchByGoodsName = computed(() => {
return goodsList.value.filter(
goods => goods.name.includes(goodName.value)
)
})
return {
goodsList,
getGoodsList,
goodsName,
searchByGoodsName
}
}
拆分並重組
現在我們要把這兩個邏輯的代碼分別拆分到兩個文件中去維護,然後再引用重組到一個新的組件中去使用。
拆分商品列表邏輯
// src/composables/useGoodsList.js
import { ref, onMounted, toRefs, watch } from 'vue'
import { fetchGoodsList } from '@/api/fetchGoodsList'
export default function useGoodsList(user) {
const goodsList = ref([])
const getGoodsList = async () => {
goodsList.value = await fetchGoodsList(user.value)
}
onMounted(getGoodsList)
watch(user, getGoodsList)
return {
goodsList,
getGoodsList
}
}
拆分商品過濾邏輯
// src/composables/useSearchByGoodsName.js
import { ref, onMounted, watch, toRefs } from 'vue'
export default function useSearchByGoodsName(goodsList) {
const goodsName = ref('')
const searchByGoodsName = computed(() => {
return goodsList.value.filter(
goods => goods.name.includes(goodName.value)
)
})
return {
goodsName,
searchByGoodsName
}
}
重組至新組件使用
// src/components/goodsListAndSearch.vue
import useGoodsList from '@/composables/useGoodsList'
import useSearchByGoodsName from '@/composables/useSearchByGoodsName'
import { toRefs } from 'vue'
export default {
props: {
user: { type: String }
},
setup(props) {
const { user } = toRefs(props)
const { goodsList, getGoodsList } = useGoodsList(user)
const { goodsName, searchByGoodsName} = useSearchByGoodsName(goodsList)
return {
goodsList
getGoodsList,
goodsName,
searchByGoodsName
}
}
}
至此商品列表 + 過濾組件就封裝完成了,我們可以在新組件 goodsListAndSearch.vue
中任意去調用 setup
暴露出來的方法和響應式引用。
總而言之,Composition API 的核心就是將組件的邏輯功能點拆分複用,方便維護。
參考文檔:vue3js.cn/docs/zh/guide/composition-api-introduction.html
本文由 Readfog 進行 AMP 轉碼,版權歸原作者所有。
來源:https://mp.weixin.qq.com/s/SVSGmv3wov4byhPSevLJ9w