Examples of using Composition API for vue 3.0

  • 2021-09-04 23:17:26
  • OfStack

There have been a lot of articles discussed on the Internet. Here, give a simple example to discuss the usage of Composition API, and the specific problems can be discussed concretely.

If we want to make a discussion list and paging of a forum, we used to put the required data in data, and the events were put in methods. If the code is less, it is easy to distinguish. If there are more codes, it will cause headaches.
Now vue 3.0 can be divided into several management classes according to business relationships to manage this code.

For example, post list + post function, let's make a template first:
(Simply mean 1, don't do beautification treatment)


<template>
 <div>
   Forum list 
  <div v-for="(item, index) in articleList" :key="'articleList' + index">
  {{index}}:{{item.title}}
  {{item.viewCount}}
  </div>
  <div><!-- Paging -->
  <a-pagination v-model:current="acticleCurrent" :total="50" show-less-items />
  </div>
 </div>
 <div style="width:400px">
   Make a post 
   Title: <a-input v-model:value="articleForm.title"/>
   Content: <a-input v-model:value="articleForm.content"/>
  <a-button type="dashed" @click="sendArticle" > Post a post </a-button>
 </div>
</template>

There is no difference in the template part above, and the change part is in js code.
We can first write a post list management class, including the data of the post list, and the method of loading data according to the page number.

The code is as follows:


//  Management class of post list 
const manageArticleList = () => {
 const articleList = ref([
 {
 title: ' This is the post ',
 viewCount: 100,
 sendTime: '2020-10-20'
 }
 ])

 //  Load the post list by page number 
 const loagActicleListByPage = (pageIndex) => {
 // alert(pageIndex)
 articleList.value = [
 {
 title: ' This is a newly loaded post ',
 viewCount: 100 + parseInt(pageIndex),
 sendTime: '2020-10-20'
 }
 ]
 }

 return {
 articleList,
 loagActicleListByPage
 }
}

Write another paging management class (a-pagination using antdv), the code is as follows


//  Paging management class 
const manageActiclePage = () => {
 const acticleCurrent = ref(0)

 return {
 acticleCurrent
 }
}

Finally, we can combine these two management classes in setup and return them to view.


export default {
 setup () {
 //  Introducing query management 
 const { articleList, loagActicleListByPage } = manageArticleList()
 //  Introducing paging management 
 const { acticleCurrent } = manageActiclePage()
 
 //  Listen for page number changes and load data 
 watch(acticleCurrent, (newValue, oldValue) => {
 loagActicleListByPage(newValue)
 })
 //  Return to view
 return {
 articleList,
 acticleCurrent,
 }
 }
}

In setup, listen to acticleCurrent page number change, call loagActicleListByPage event of manageArticleList, load data.
Of course, there are other combinations, and here is just a simple example.

In this way, the code can be distributed according to the business logic, which is convenient for expansion and maintenance. For example, if we want to add a query function, we can add an loagActicleListByQuery event in manageArticleList.

The final effect is that the code is completely distributed into multiple management classes according to business logic. setup only needs to be responsible for loading and integration, and setup will not have much code.

The management class should be able to be written in a separate js file, such as the form's js code in a separate js file: (bbs-manageArticleForm. js)


import { ref } from 'vue'

//  Management class of post list 
export function manageArticleForm () {
 const modelForm = ref(
 {
 title: ' This is the title of the post ',
 content: ' Post content ',
 sendTime: '2020-10-20'
 }
 )
 //  Load the post list by page number 
 const sendArticle = () => {
 //  Call axios  Submit to the backend 
 alert(' Pretend the publication was successful. . . ')
 }
 return {
 articleForm: modelForm,
 sendArticle
 }
}

Then it is introduced in views with import

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

In setup, the settings are as follows:


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

 //  Return to view
 return {
 ......
 articleForm,
 sendArticle,
 ......
 }
}

It is written in a separate js file, which means it can be reused. It can be used not only here, but also in other places. Well, there is basically nothing to reuse in this form, so here is just an example.

The above is the Composition API example of vue 3.0, more information about Composition API of vue 3.0 please pay attention to other related articles on this site!


Related articles: