<template> ?<div> ? ? ?論壇列表 ? ? ?<div v-for="(item, index) in articleList" :key="'articleList' + index"> ? ? ? ?{{index}}:{{item.title}} ? ? ? ?{{item.viewCount}} ? ? ?</div> ? ? ?<div><!--分頁(yè)--> ? ? ? ?<a-pagination v-model:current="acticleCurrent" :total="50" show-less-items /> ? ? ?</div> ?</div> ?<div style="width:400px"> ? ? ?發(fā)個(gè)帖子 ? ? ?標(biāo)題：<a-input v-model:value="articleForm.title"/> ? ? ?內(nèi)容：<a-input v-model:value="articleForm.content"/> ? ? ?<a-button type="dashed" @click="sendArticle" >發(fā)表帖子</a-button> ?</div></template>

上面的模板部分沒有啥區(qū)別，變化部分在js代碼。
我們可以先寫一個(gè)帖子列表的管理類，包含帖子列表的數(shù)據(jù)，和依據(jù)頁(yè)號(hào)加載數(shù)據(jù)的方法。

代碼如下：

// 帖子列表的管理類const manageArticleList = () => { ?const articleList = ref([ ? ?{ ? ? ?title: '這是帖子', ? ? ?viewCount: 100, ? ? ?sendTime: '2020-10-20' ? ?} ?]) ?// 依據(jù)頁(yè)號(hào)加載帖子列表 ?const loagActicleListByPage = (pageIndex) => { ? ?// alert(pageIndex) ? ?articleList.value = [ ? ? ?{ ? ? ? ?title: '這是新加載的帖子帖子', ? ? ? ?viewCount: 100 + parseInt(pageIndex), ? ? ? ?sendTime: '2020-10-20' ? ? ?} ? ?] ?} ?return { ? ?articleList, ? ?loagActicleListByPage ?} }

再寫一個(gè)分頁(yè)的管理類（使用antdv的a-pagination），代碼如下

// 分頁(yè)管理類const manageActiclePage = () => { ?const acticleCurrent = ref(0) ?return { ? ?acticleCurrent ?} }

最后我們可以在setup里面把這兩個(gè)管理類給結(jié)合起來(lái)，一起返回給view。

export default { ?setup () { ? ?// 引入查詢管理 ? ?const { articleList, loagActicleListByPage } = manageArticleList() ? ?// 引入分頁(yè)管理 ? ?const { acticleCurrent } = manageActiclePage() ? ?// 監(jiān)聽頁(yè)號(hào)變化，加載數(shù)據(jù) ? ?watch(acticleCurrent, (newValue, oldValue) => { ? ? ?loagActicleListByPage(newValue) ? ?}) ? ?// 返回給view ? ?return { ? ? ?articleList, ? ? ?acticleCurrent, ? ?} ?} }

在setup里面，監(jiān)聽 acticleCurrent 頁(yè)號(hào)變化，調(diào)用 manageArticleList 的 loagActicleListByPage 事件，加載數(shù)據(jù)。
當(dāng)然也可以有其他的組合方式，這里只是舉個(gè)簡(jiǎn)單的例子。

這樣代碼可以根據(jù)業(yè)務(wù)邏輯分散開，便于擴(kuò)展和維護(hù)，比如我們要加一個(gè)查詢功能，那么可以在 manageArticleList 里面加個(gè) loagActicleListByQuery 的事件。

最后的效果就是，代碼依據(jù)業(yè)務(wù)邏輯，完全分散成多個(gè)管理類，setup只需要負(fù)責(zé)加載和整合即可，setup里面也不會(huì)有很多代碼。

管理類應(yīng)該可以寫在單獨(dú)的js文件里面，比如我們把表單的js代碼寫在單獨(dú)的js文件里面：(bbs-manageArticleForm.js)

import { ref } from 'vue'// 帖子列表的管理類export function manageArticleForm () { ?const modelForm = ref( ? ?{ ? ? ?title: '這是帖子標(biāo)題', ? ? ?content: '帖子內(nèi)容', ? ? ?sendTime: '2020-10-20' ? ?} ?) ?// 依據(jù)頁(yè)號(hào)加載帖子列表 ?const sendArticle = () => { ? ?// 調(diào)用axios 向后端提交 ? ?alert('假裝發(fā)表成功了。。。') ?} ?return { ? ?articleForm: modelForm, ? ?sendArticle ?} }

然后在views里面用import引入

import { manageArticleForm } from './bbs-manageArticleForm.js'

在setup里面設(shè)置如下：

setup() { ? ?...... ? ?// 表單 ? ?const { articleForm, sendArticle } = manageArticleForm() ? ?// 返回給view ? ?return { ? ? ?...... ? ? ?articleForm, ? ? ?sendArticle, ? ? ?...... ? ?} }