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文件裏面，意味着能夠複用。不只這裏能夠用，其餘的地方也能夠直接拿過來用。好吧，這個表單基本沒啥能夠好複用的，這裏只是舉個例子。