vue3.0 的 Composition API 的一种使用方法

网上讨论的文章已经不少了，这里举一个简单的例子来讨论一下 Composition API 的用法，具体问题才好具体讨论嘛。

假如咱们要作一个论坛的讨论列表和分页，之前是把须要的数据都放在data里面，事件都放在methods 里面，代码少的话还好分辨，若是代码多了，看着就头疼了。
如今vue3.0能够按照业务关系分红多个管理类来管理这些代码。

好比帖子列表+发帖功能，咱们先作一个模板：
（简单表示一下，不作美化处理了）

论坛列表{{index}}:{{item.title}}
        {{item.viewCount}}        
      发个帖子
      标题：
      内容：
      发表帖子

上面的模板部分没有啥区别，变化部分在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,
      ......
    }
}

写在单独的js文件里面，意味着能够复用。不只这里能够用，其余的地方也能够直接拿过来用。好吧，这个表单基本没啥能够好复用的，这里只是举个例子。