手把手教你使用 Vue3 中的 Composition API 来封装一个商品列表组件

发表于 1年以前 | 总阅读数：606 次

本文我们将使用 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 的核心就是将组件的逻辑功能点拆分复用，方便维护。

本文仅是 Composition API 基本使用方法，如有疑问或不懂的地方请在下方留言，小编会一一解答滴。