阅读 3123

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

本文我们将使用 Composition API 来封装一个商品列表组件,功能分为两块逻辑:列表查询和按商品名称过滤,涉及到新的 APIsetup 中的 refonMountedwatchcomputed,看完后你将掌握 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 中任意去调用 setup 暴露出来的方法了。

总而言之,Composition API 的核心就是将组件的逻辑功能点拆分复用。

参考:vue3js.cn/docs/zh/guide/composition-api-introduction.html

本文使用 mdnice 排版

文章分类
前端
文章标签