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

網上討論的文章已經很多了，這里舉一個簡單的例子來討論一下 Composition API 的用法，具體問題才好具體討論嘛。

假如我們要做一個論壇的討論列表和分頁，以前是把需要的數據都放在data里面，事件都放在methods 里面，代碼少的話還好分辨，如果代碼多了，看着就頭疼了。
現在vue3.0可以按照業務關系分成多個管理類來管理這些代碼。

比如帖子列表+發帖功能，我們先做一個模板：
（簡單表示一下，不做美化處理了）

<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,
      ......
    }
}

寫在單獨的js文件里面，意味着可以復用。不僅這里可以用，其他的地方也可以直接拿過來用。好吧，這個表單基本沒啥可以好復用的，這里只是舉個例子。