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>

// 帖子列表的管理类
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
 }
}

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

 return {
 acticleCurrent
 }
}

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

import { ref } from 'vue'

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

setup() {
 ......
 // 表单
 const { articleForm, sendArticle } = manageArticleForm()

 // 返回给view
 return {
 ......
 articleForm,
 sendArticle,
 ......
 }
}