vue3.0 的 Composition API 的一种使用方法
<template>
<div>
论坛列表 <div v-for="(item, index) in articleList" :key="'articleList' + index">
{{index}}:{{item.title}}
{{item.viewCount}} </div>
<div><!--分页-->
<a-pagination v-model:current="acticleCurrent" :total="50" show-less-items />
</div>
</div>
<div style="width:400px">
发个帖子
标题：<a-input v-model:value="articleForm.title"/>
内容：<a-input v-model:value="articleForm.content"/>
<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)
articleList.value = [
{ 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文件里面：(bbs-manageArticleForm.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 './bbs-manageArticleForm.js'
在setup里面设置如下：
setup() {
...... // 表单
const { articleForm, sendArticle } = manageArticleForm() // 返回给view
return {
......
articleForm,
sendArticle,
......
}
}
