Vue3-CompositionAPI初探

孙泽辉

发布于：2021年7月31日

字数：462字

时长：2分钟

次浏览

趁着大好时间赶紧学习一下vue3，过两天好像要跟王老师一起做项目，我菜的很，好慌。。。

CompositionAPI缘由

很喜欢那位老师的话：新技术的出现必然是解决上一代遗留的问题。现在读起来还是很有感触。

在Vue2中编写的代码，逻辑混杂在data、computed、methods、watch中，伴随着项目逐渐庞大，再去看代码的时候，查看一处逻辑需要来回翻，很是恶心（作为一个把所有代码都写在App.vue的猛男深有感触）

CompositionAPI能够做到将同一个逻辑点收集在一起，代码分离起来更加干净，今天就试着写一下请求知乎的每日一词接口。

分析

请求接口这类逻辑每个api单独存一个文件，统一放到/api目录下

├─api
│      fetchSentence.ts

在文档上学习了封装composables，也新建文件夹统一管理

├─composables
│      useSentence.ts

使用import引入ts文件的时候不会自动默认扩展名，在webpack.config.js里配置上

// webpack.config.js
const { resolve } = require('path')

exports.module = {
  resolve: {
    alias: {
      '@': resolve('src')
    },
    extension: ['js', 'vue', 'ts']
  }
}

实现

请求接口实现：

// api/fetchSentence.ts
import axios from 'axios'

interface response {
  checkin_day_count: number,
  greeting: { text: string, emoji: string }
}


export async function fetchSentence () {
  const data: response = (await axios.get('/zhihu')).data
  return data?.greeting?.text
}

封装compositionAPI：

// composables/useSentence.ts
import { onMounted, ref } from 'vue'
import { fetchSentence } from '@/api/fetchSentence'

export default function useSentence () {
  const sentence = ref('')

  const getSentence = async () => {
    sentence.value = await fetchSentence()
  }

  onMounted(getSentence)
  return {
    getSentence,
    sentence
  }
}

组件内调用：

<!-- Helloworld.vue -->
<template>
  <div class="root">
    <h1>{{ sentence }}</h1>
  </div>
</template>

<script>
import useSentence from '@/composables/useSentence'

export default {
  name: 'HelloWorld',
  setup () {
    const {
      sentence,
      getSentence
    } = useSentence()

    console.log(sentence)

    return {
      sentence
    }
  }
}
</script>

效果：