前言
纯菜鸡记录
业务场景
[图片上传失败...(image-ed53dd-1658375271104)]
- 拆分思路：
- 根据业务，可以分成 nav（面包屑+树状导航）、page（内容展示）；根据内容展示的不同，还可以继续拆分
- 根据项目结构，可以分为xxx.vue（页面）、data_xx.ts（接口）、use_xx.ts（逻辑），还有其他文件，如常量管理、路由管理、鉴权管理等
- 拆分方向：
拆分足够细，尽量使用函数式编程（有很多方向，只是选择了其中的一种）
- 以拆分nav（面包屑+树状导航）为例
文件结构：
[图片上传失败...(image-670478-1658375271104)]
/*
* bread-crumb.vue
* 面包屑页面：包含页面需要的数据以及跳转功能
* data_nav.ts
* nav（面包屑+树状导航）相关接口文件及简单数据处理
* index.vue
* nav（面包屑+树状导航）入口页面（布局、提供各个子页面所需的数据
* interface.ts
* typescript相关接口定义等
* tree.vue和tree_menu.vue
* 树状导航：包含页面需要的数据以及跳转功能
* use_base.ts
* 组装全局所需的一些字段，如 id 等
* use_nav.ts
* 组装nav（面包屑+树状导航）所需的数据
* use_router.ts
* 跳转功能封装
*/
- 不同业务模块之间的数据交互（在交互设计上，需要尽可能做到功能分离化）
在nav（面包屑+树状导航）模块定义：
/**
* use_base.ts
* 基本信息钩子：暴露了基本数据base，并且provide了可供全局使用的数据和方法
*/
import { provide, computed } from 'vue'
import { useRoute, useRouter } from 'vue-router'
import { BASE, BASE_ID_OPEN } from './constant'
function fmtId(v?: string) {
return v || ''
}
export function useBase() {
const router = useRouter()
const route = useRoute()
const base = computed(() => {
return {
id: fmtId(route.query.id as string),
parentId: fmtId(route.query.parentId as string)
}
})
provide(BASE, base)
provide(BASE_ID_OPEN, (id: string) => {
router.push({ query: { id } })
})
return {
base
}
}
在内容展示模块使用：
// use_main.ts
import { computed, ComputedRef, inject, watch } from 'vue'
import { BASE, CHAIN, BASE_ID_OPEN } from './constant'
import { TribeData } from './interface'
export function useMain() {
const base = inject<ComputedRef<{ id: string, parentId: string }>>(BASE, computed(() => ({
id: '',
parentId: ''
})))
const openId = inject<(id: string) => void>(BASE_ID_OPEN)
const updateChain = (name: string) => {
const lastChainItem = chain.value[chain.value.length - 1]
lastChainItem.label = name
}
return {
base,
openId,
chain,
updateChain
}
}
这样，在内容展示模块就可以使用这些基本信息和方法了。
补充：
最近遇到了这样一个场景（如下图）
[图片上传失败...(image-4f9ae9-1658375271104)]
页面上的表格和弹窗中的表格其实会调同一个接口，由于页面上可操作这个表格，进行新增、编辑和删除等，而弹窗中的表格是全量数据（先不谈展示优化）
因此，为保证弹窗中的表格数据要与页面的保持一致，需要每弹出一次弹窗就要调一下全量数据的接口。
但是根据需求分析，有一些状态下，页面表格是不可操作状态的，也就意味着，弹窗数据不会发生变化，此时，就可以将请求返回的数据缓存起来，不必每次点击查看就发起请求了。
// use_cache.ts
import { computed, ref, watch, reactive } from 'vue'
import { getXXX } from './data_XXX'
import { showError } from '@/XXX'
import type { IXXX } from './interface'
// 页面数据缓存池
export const poolList: Record<number, IXXX[]> = {}
// 用于显示更多信息
export function useCache() {
// 是否发请求
const noCache = ref<boolean>(true)
// 区分数据缓存池中不同数据的标识
const cacheId = ref<number | undefined>()
const cache = reactive<Array<ISpecFunc>>([])
async function echo() {
const id = cacheId.value
if (id === undefined) { return }
if (noCache.value && !(poolList[id])) {
try {
const ret = await getXXX({
id,
current: -1
})
poolList[id] = ret.list
Object.assign(cache, ret.list)
} catch (err) {
showError(err)
}
}
}
return {
noCache,
cacheId,
cache,
echo
}
}
// 弹窗
<script lang="ts" setup>
import { watch, computed } from 'vue'
import { useCache } from './use_cache'
const { noCache, cacheId, cache, echo } = useSpecCache()
const props = defineProps<{
noCache: boolean
specId: number | undefined
visible: boolean
}>()
watch(
() => props.visible,
(val) => {
if (val) {
noCache.value = props.noCache
cacheId.value = props.specId as number
echo()
}
}
)
const isVisible = computed(() => props.visible)
const emit = defineEmits<{
(event: 'close'): void,
}>()
const onclose = () => {
emit('close')
}
</script>
<template>
<el-dialog
v-model="isVisible"
width="860px"
@close="onclose"
>
...
</el-dialog>
</template>
如果后台配合的话，还可以做的更多，比如后台返回一个数据id，记录这份数据的更新，每一次更新都会改变这个字段，这样就可以将这个字段与cacheId组合起来区分数据缓存池中的不同数据
