<template>  <div>      论坛列表      <div v-for="(item, index) in articleList" :key="'articleList' + index">        {{index}}:{{}}        {{}}      </div>      <div><!--分页-->        <a-pagination v-model:current="acticleCurrent" :total="50" show-less-items />      </div>  </div>  <div style="width:400px">      发个帖子      标题：<a-input v-model:value=""/>      内容：<a-input v-model:value=""/>      <a-button type="dashed" @click="sendArticle" >发表帖子</a-button>  </div></template>

(相关资料图)

上面的模板部分没有啥区别，变化部分在js代码。我们可以先写一个帖子列表的管理类，包含帖子列表的数据，和依据页号加载数据的方法。

代码如下：

// 帖子列表的管理类const manageArticleList = () => {  const articleList = ref([    {      title: '这是帖子',      viewCount: 100,      sendTime: '2020-10-20'    }  ])  // 依据页号加载帖子列表  const loagActicleListByPage = (pageIndex) => {    // alert(pageIndex)     = [      {        title: '这是新加载的帖子帖子',        viewCount: 100 + parseInt(pageIndex),        sendTime: '2020-10-20'      }    ]  }  return {    articleList,    loagActicleListByPage  }}

再写一个分页的管理类（使用antdv的a-pagination），代码如下

// 分页管理类const manageActiclePage = () => {  const acticleCurrent = ref(0)  return {    acticleCurrent  }}

最后我们可以在setup里面把这两个管理类给结合起来，一起返回给view。

export default {  setup () {    // 引入查询管理    const { articleList, loagActicleListByPage } = manageArticleList()    // 引入分页管理    const { acticleCurrent } = manageActiclePage()    // 监听页号变化，加载数据    watch(acticleCurrent, (newValue, oldValue) => {      loagActicleListByPage(newValue)    })    // 返回给view    return {      articleList,      acticleCurrent,    }  }}

在setup里面，监听 acticleCurrent 页号变化，调用 manageArticleList 的 loagActicleListByPage 事件，加载数据。当然也可以有其他的组合方式，这里只是举个简单的例子。

这样代码可以根据业务逻辑分散开，便于扩展和维护，比如我们要加一个查询功能，那么可以在 manageArticleList 里面加个 loagActicleListByQuery 的事件。

最后的效果就是，代码依据业务逻辑，完全分散成多个管理类，setup只需要负责加载和整合即可，setup里面也不会有很多代码。

管理类应该可以写在单独的js文件里面，比如我们把表单的js代码写在单独的js文件里面：()

import { ref } from 'vue'// 帖子列表的管理类export function manageArticleForm () {  const modelForm = ref(    {      title: '这是帖子标题',      content: '帖子内容',      sendTime: '2020-10-20'    }  )  // 依据页号加载帖子列表  const sendArticle = () => {    // 调用axios 向后端提交    alert('假装发表成功了。。。')  }  return {    articleForm: modelForm,    sendArticle  }}

然后在views里面用import引入

import { manageArticleForm } from './'

在setup里面设置如下：

setup() {    ......    // 表单    const { articleForm, sendArticle } = manageArticleForm()    // 返回给view    return {      ......      articleForm,      sendArticle,      ......    }}

标签：