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

金色海洋（jyk）發表於2020-10-26
VueAPI

網上討論的文章已經很多了，這裡舉一個簡單的例子來討論一下 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檔案裡面，意味著可以複用。不僅這裡可以用，其他的地方也可以直接拿過來用。好吧，這個表單基本沒啥可以好複用的，這裡只是舉個例子。

相關文章