持续创作，加速成长！这是我参与「掘金日新计划 · 6 月更文挑战」的第30天，点击查看活动详情
前言
实战已经开始了！前面两篇文章中我们把详情页的样式和逻辑都写的差不多了，但是在写逻辑的部分，还是把所有的逻辑代码都写在了setup函数中。本篇文章主要是和大家一起使用之前学过的watchEffect方法对逻辑部分的代码进行拆分。
代码拆分
🌀 看到下图中的代码逻辑，其实是分为四个模块：静态数据、定义数据、获取列表数据、点击tab事件。再加上底部的执行方法和结构数据，代码量虽然不算大，但是阅读起来比较麻烦，代码不统一，每次看一段逻辑的时候，可能还需要上下翻动去找。所以就需要拆分代码逻辑，让setup函数更加简洁一点，也让代码更加统一。
静态数据
🌀 对于静态数据，其实可以不用放到setup函数中，直接放在外部也是可以的。
<script>
// import部分
const categories = [
{ name: '全部商品', tab: 'all' },
{ name: '秒杀', tab: 'seckill' },
{ name: '新鲜水果', tab: 'fruit' }
]
export default {
setup(){
// 逻辑部分
return { categories }
}
}
因为categories属于一个常量，也是固定不会变化的，所以直接放在外部也是可以访问的。在setup函数中也是需要return给外部的。
tab栏相关逻辑
🌀 tab栏部分的逻辑根据上面的完整代码截图可以看出，主要就是定义了currentTab的值，并且在点击tab的时候将点击的数据值赋给currenttab。
😲 在点击事件里面其实还调用了获取数据的方法，但是这个获取数据和tab的逻辑并没有直接关系，可以放到获取数据的拆分代码中去。
👉 所以我们拆分出来的tab栏相关逻辑就是定义currentTab和点击tab栏时赋值而已。
// Tab 相关逻辑部分
const useTabEffect = () => {
const currentTab = ref(categories[0].tab)
const handleTabClick = (tab) => {
currentTab.value = tab
}
return { currentTab, handleTabClick }
}
👉 在setup函数中还要结构出useTabEffect函数
setup(){
const { currentTab, handleTabClick } = useTabEffect()
return { categories, currentTab, handleTabClick }
}
👉 点击tab的时候调用的方法也得修改一下
@click="handleCategoryClick(item.tab)"
⬇️修改为⬇️
@click="handleTabClick(item.tab)"
watchEffect方法拆分出获取列表数据逻辑
🌀 在获取列表的逻辑中，根据上面代码图示可以看出，首先是定义了一个数组用来接收获取的数据。
👉 拆分出定义数据的部分
// 获取数据相关逻辑
const useCurrentListEffect = () => {
const content = reactive({ list: [] })
}
🌀 在获取数据调用接口的时候，是根据tab的值改变来重新执行的，在我们以前学过的CompositionAPI篇章中有了解过一个侦听器函数：watchEffect
watchEffect：当页面首次加载时，以及它监听的数据发生变化时就会执行的函数。
👉 了解了原理，我们就可以在watchEffect函数中调用获取数据的方法
// 先引入watchEffect
import { watchEffect } from 'vue'
const useCurrentListEffect = () => {
const content = reactive({ list: [] })
const getContentData = async (tab) => {
const result = await get('/api/shop/1/products', { tab })
if (result.data.code === 0 && result.data.data.length) {
content.list = result.data.data
}
}
// watchEffect函数监听获取数据方法
watchEffect(() => {
getContentData()
})
}
😲 此时watchEffect函数会分析getContentData方法中依赖的数据，如果依赖的数据发生变化或者首屏加载时，那么watchEffect侦听器函数就会重新执行。
🤔 知道了watchEffect函数需要依赖某个数据才能重新执行，那么在getContentData方法中，就需要定义一个可以让watchEffect函数依赖的值，也就是tab栏的数据值。
😲 tab栏的数据值在拆分Tab相关逻辑的时候，已经定义过了，而且在setup函数中结果出来了。所以我们就可以在setup函数中给useCurrentListEffect方法传递currentTab，这样就可以让watchEffect函数监听到了。
👉 定义依赖数据值
const useCurrentListEffect = (currentTab) => {
const content = reactive({ list: [] })
const getContentData = async () => {
const result = await get('/api/shop/1/products', { tab: currentTab.value })
if (result.data.code === 0 && result.data.data.length) {
content.list = result.data.data
}
}
watchEffect(() => {
getContentData()
})
const { list } = toRefs(content)
return { list }
}
- 接收到currentTab之后，由于是用ref函数赋值的，所以需要用currentTab.value的方式取值
👉 从setup函数中获取依赖数据值
setup () {
const { currentTab, handleTabClick } = useTabEffect()
const { list } = useCurrentListEffect(currentTab)
return { categories, currentTab, list, handleTabClick }
}
👉 由于我们重新定义了获取数据的绑定值，所以页面上循环的contentList也需要改成list
v-for="item in contentList"
⬇️修改成⬇️
v-for="item in list"
补充
在详情页获取店铺数据时，我们使用了 route.params 的方式获取到列表传递过来的id，那么我们在获取商品列表时，也可以用同样的方法去动态改变店铺id。
👉 引入useRoute
import { useRoute } from 'vue-router'
👉 获取id
const route = useRoute()
const shopId = route.params.id
👉 接口中动态使用id
const getContentData = async () => {
const result = await get(`/api/shop/${shopId}/products`, { tab: currentTab })
if (result.data.code === 0 && result.data.data.length) {
content.list = result.data.data
}
}
完整拆分代码
总结
本篇文章主要是带着大家一起把详情页中的逻辑代码拆分出来，并且重新回顾了一下watchEffect侦听器的使用方法，结合实战案例之后，相信大家对watchEffect侦听器方法的使用有了进一步的理解。
