手把手教你使用 Vue3 中的 Composition API 來封裝一個商品列表組件

本文我們將使用 Composition API 來封裝一個商品列表組件，功能分爲兩塊邏輯：列表查詢和按商品名稱過濾，涉及到新的 API 有 setup 中的 ref、onMounted、watch、computed，看完後你將掌握 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

猜你喜歡