快捷導(dǎo)航

vue3.0 的 Composition API 的使用示例

更新時(shí)間：2020年10月26日 11:01:56 作者：金色海洋

這篇文章主要介紹了vue3.0 的 Composition API 的使用示例，幫助大家更好的理解和學(xué)習(xí)vue，感興趣的朋友可以了解下

網(wǎng)上討論的文章已經(jīng)很多了，這里舉一個(gè)簡(jiǎn)單的例子來(lái)討論一下 Composition API 的用法，具體問(wèn)題才好具體討論嘛。

假如我們要做一個(gè)論壇的討論列表和分頁(yè)，以前是把需要的數(shù)據(jù)都放在data里面，事件都放在methods 里面，代碼少的話(huà)還好分辨，如果代碼多了，看著就頭疼了。
現(xiàn)在vue3.0可以按照業(yè)務(wù)關(guān)系分成多個(gè)管理類(lèi)來(lái)管理這些代碼。

比如帖子列表+發(fā)帖功能，我們先做一個(gè)模板：
（簡(jiǎn)單表示一下，不做美化處理了）

<template>
 <div>
  論壇列表
  <div v-for="(item, index) in articleList" :key="'articleList' + index">
  {{index}}:{{item.title}}
  {{item.viewCount}}
  </div>
  <div><!--分頁(yè)-->
  <a-pagination v-model:current="acticleCurrent" :total="50" show-less-items />
  </div>
 </div>
 <div style="width:400px">
  發(fā)個(gè)帖子
  標(biāo)題：<a-input v-model:value="articleForm.title"/>
  內(nèi)容：<a-input v-model:value="articleForm.content"/>
  <a-button type="dashed" @click="sendArticle" >發(fā)表帖子</a-button>
 </div>
</template>

上面的模板部分沒(méi)有啥區(qū)別，變化部分在js代碼。
我們可以先寫(xiě)一個(gè)帖子列表的管理類(lèi)，包含帖子列表的數(shù)據(jù)，和依據(jù)頁(yè)號(hào)加載數(shù)據(jù)的方法。

代碼如下：

// 帖子列表的管理類(lèi)
const manageArticleList = () => {
 const articleList = ref([
 {
 title: '這是帖子',
 viewCount: 100,
 sendTime: '2020-10-20'
 }
 ])

 // 依據(jù)頁(yè)號(hào)加載帖子列表
 const loagActicleListByPage = (pageIndex) => {
 // alert(pageIndex)
 articleList.value = [
 {
 title: '這是新加載的帖子帖子',
 viewCount: 100 + parseInt(pageIndex),
 sendTime: '2020-10-20'
 }
 ]
 }

 return {
 articleList,
 loagActicleListByPage
 }
}

再寫(xiě)一個(gè)分頁(yè)的管理類(lèi)（使用antdv的a-pagination），代碼如下

// 分頁(yè)管理類(lèi)
const manageActiclePage = () => {
 const acticleCurrent = ref(0)

 return {
 acticleCurrent
 }
}

最后我們可以在setup里面把這兩個(gè)管理類(lèi)給結(jié)合起來(lái)，一起返回給view。

export default {
 setup () {
 // 引入查詢(xún)管理
 const { articleList, loagActicleListByPage } = manageArticleList()
 // 引入分頁(yè)管理
 const { acticleCurrent } = manageActiclePage()
 
 // 監(jiān)聽(tīng)頁(yè)號(hào)變化，加載數(shù)據(jù)
 watch(acticleCurrent, (newValue, oldValue) => {
 loagActicleListByPage(newValue)
 })
 // 返回給view
 return {
 articleList,
 acticleCurrent,
 }
 }
}

在setup里面，監(jiān)聽(tīng) acticleCurrent 頁(yè)號(hào)變化，調(diào)用 manageArticleList 的 loagActicleListByPage 事件，加載數(shù)據(jù)。
當(dāng)然也可以有其他的組合方式，這里只是舉個(gè)簡(jiǎn)單的例子。

這樣代碼可以根據(jù)業(yè)務(wù)邏輯分散開(kāi)，便于擴(kuò)展和維護(hù)，比如我們要加一個(gè)查詢(xún)功能，那么可以在 manageArticleList 里面加個(gè) loagActicleListByQuery 的事件。

最后的效果就是，代碼依據(jù)業(yè)務(wù)邏輯，完全分散成多個(gè)管理類(lèi)，setup只需要負(fù)責(zé)加載和整合即可，setup里面也不會(huì)有很多代碼。

管理類(lèi)應(yīng)該可以寫(xiě)在單獨(dú)的js文件里面，比如我們把表單的js代碼寫(xiě)在單獨(dú)的js文件里面：(bbs-manageArticleForm.js)

import { ref } from 'vue'

// 帖子列表的管理類(lèi)
export function manageArticleForm () {
 const modelForm = ref(
 {
 title: '這是帖子標(biāo)題',
 content: '帖子內(nèi)容',
 sendTime: '2020-10-20'
 }
 )
 // 依據(jù)頁(yè)號(hào)加載帖子列表
 const sendArticle = () => {
 // 調(diào)用axios 向后端提交
 alert('假裝發(fā)表成功了。。。')
 }
 return {
 articleForm: modelForm,
 sendArticle
 }
}

然后在views里面用import引入

import { manageArticleForm } from './bbs-manageArticleForm.js'

在setup里面設(shè)置如下：

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

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

寫(xiě)在單獨(dú)的js文件里面，意味著可以復(fù)用。不僅這里可以用，其他的地方也可以直接拿過(guò)來(lái)用。好吧，這個(gè)表單基本沒(méi)啥可以好復(fù)用的，這里只是舉個(gè)例子。

以上就是vue3.0 的 Composition API 的使用示例的詳細(xì)內(nèi)容，更多關(guān)于vue3.0 的 Composition API 的資料請(qǐng)關(guān)注腳本之家其它相關(guān)文章！

您可能感興趣的文章: