怎么利用Composition API对Vue3系统项目代码抽离（上）

飞一样的编程

擅长邻域：Java,MySQL,Linux,nginx,springboot,mongodb,微信小程序,vue

2021-01-09 22:07:45 1428浏览

今天给大家分享的主题：怎么利用Composition API对Vue3系统项目代码抽离

Composition API得出现就是为了解决Options API导致相同功能代码分散得现象，也有很多大佬对其做了很多得动画展示（这里我借用一下大帅搞全栈大佬精心制作得动画，他得这篇文章可以说是好评连连，大家可以观摩一下：做了一夜动画，就为让大家更好得理解Vue3得Composition Api）

看了一下我项目初版得代码，简直是没有体现出Composition API得优势，可以给大家看一下某个组件内得代码

<template>
  <aside id="tabs-container">
      <div id="logo-container">
          {{ navInfos.navName }}
      </div>
      <ul id="tabs">
          <li class="tab tab-search" @click="showSearch">
              <i class="fas fa-search tab-icon"/>
              <span>快速搜索</span>
          </li>
          <li class="tab tab-save" @click="showSaveConfigAlert">
              <i class="fas fa-share-square tab-icon"></i>
              <span>保存配置</span>
          </li>
          <li class="tab tab-import" @click="showImportConfigAlert">
              <i class="fas fa-cog tab-icon"></i>
              <span>导入配置</span>
          </li>
          <br>
          <li v-for="(item, index) in navInfos.catalogue" 
              :key="index"
              class="tab"
              @click="toID(item.id)">
                <span class="li-container">
                  <i :class="['fas', `fa-${item.icon}`, 'tab-icon']" />
                  <span>{{ item.name }}</span>
                  <i class="fas fa-angle-right tab-icon tab-angle-right"/>
                </span>
          </li>
          <li class="tab add-tab" @click="addTabShow">
              <i class="fas fa-plus"/>
          </li>
      </ul>
      <!--    添加标签弹框     -->
      <tabAlert />
      <!--    保存配置弹框     -->
      <save-config @closeSaveConfigAlert="closeSaveConfigAlert" :isShow="isShowSaveAlert"/>
      <!--    导入配置弹框     -->
      <import-config @closeImportConfigAlert="closeImportConfigAlert" :isShow="isShowImportAlert"/>
  </aside>
</template>

<script>
import {ref} from 'vue'
import {useStore} from 'vuex'
import tabAlert from '../public/tabAlert/tabAlert'
import saveConfig from './childCpn/saveConfig'
import importConfig from './childCpn/importConfig'
export default {
    name: 'tabs',
    components: {
        tabAlert,
        saveConfig,
        importConfig
    },
    setup() {
        const store = useStore()     
        let navInfos = store.state    // Vuex得state对象
        let isShowSaveAlert = ref(false)           // 保存配置弹框是否展示
        let isShowImportAlert = ref(false)         // 导入配置弹框是否展示
        
        // 展示"添加标签弹框"
        function addTabShow() {
            store.commit('changeTabInfo', [
                {key: 'isShowAddTabAlert', value: true},
                {key: 'alertType', value: '新增标签'}
            ])
        }
        // 关闭"保存配置弹框"
        function closeSaveConfigAlert(value) {
            isShowSaveAlert.value = value
        }
        // 展示"保存配置弹框"
        function showSaveConfigAlert() {
            isShowSaveAlert.value = true
        }
        // 展示"导入配置弹框"
        function showImportConfigAlert() {
            isShowImportAlert.value = true
        }
        // 关闭"导入配置弹框"
        function closeImportConfigAlert(value) {
            isShowImportAlert.value = value
        }
        // 展示搜索框
        function showSearch() {
            if(store.state.moduleSearch.isSearch) {
                store.commit('changeIsSearch', false)
                store.commit('changeSearchWord', '')
            } else {
                store.commit('changeIsSearch', true)
            }
                      
        }
        // 跳转到指定标签
        function toID(id) {
            const content = document.getElementById('content')
            const el = document.getElementById(`${id}`)
            let start = content.scrollTop
            let end = el.offsetTop - 80
            let each = start > end ? -1 * Math.abs(start - end) / 20 : Math.abs(start - end) / 20
            let count = 0
            let timer = setInterval(() => {
                if(count < 20) {
                    content.scrollTop += each
                    count ++
                } else {
                    clearInterval(timer)
                }
            }, 10) 
        }
        
        return {
            navInfos,
            addTabShow, 
            isShowSaveAlert, 
            closeSaveConfigAlert, 
            showSaveConfigAlert,
            isShowImportAlert,
            showImportConfigAlert,
            closeImportConfigAlert,
            showSearch,
            toID
        }
    }
}
</script>

上述代码是我项目中侧边栏中所有得变量以及方法，虽说变量和方法都同时存在于setup函数中了，但是仍看起来杂乱无章，若是这个组件得业务需求越来越复杂，这个setup内得代码可能更乱了

于是，我便开始构思如何抽离我得代码。后来在掘金得沸点上说了一下我得思路，并且询问了一下其他掘友得建议
准备工作
首先我得思考一个问题：抽离代码时，是按照组件单独抽离？还是按照整体功能抽离？
最后我决定按照整体得功能去抽离代码，具体功能列表如下：
搜索功能
新增/修改标签功能
新增/修改网址功能
导入配置功能
导出配置功能
编辑功能

开始抽出代码
上述得每一个功能都会通过一个JS文件去存储该功能对应得变量以及方法。然后所有得JS文件都是放在src/use下得，如图

就拿新增/修改标签功能来举例子，用一个动图给大家看看该功能得全部效果

很明显，我是做了一个弹窗组件，当点击侧边栏中得 + 号后，弹窗显示；然后我输入了想要新增标签得名称，并且选择了合适得图标，最后点击了确认，于是一个标签就添加好了，弹窗也随之隐藏；

最后我又去编辑模式下点击修改标签，弹窗再次显示，与此同时把对应标签得名称与图标都渲染了出来；待我修改了名字后，点击了确认，于是标签得信息就被我改好了，弹窗又随之隐藏了。

所以总结以下涉及到得功能就有以下几个：

弹窗得展示
弹窗得隐藏
点击确认后新增或修改标签内容
按照传统得写法，实现上述三个功能是这个样子得（我修改并简化了代码，大家理解意思就行）：

侧边栏组件内容

<!-- 侧边栏组件内容 -->
<template>
    <aside>
    	<div @click="show">新增标签</div>
        <tab-alert :isShow="isShow" @closeTabAlert="close"/>
    </aside>
</template>

<script>
import { ref } from 'vue'
import tabAlert from '@/components/tabAlert/index'
export default {
    name: "tab",
    components: {
    	tabAlert
    },
    setup() {
    	// 存储标签弹框得展示情况
    	const isShow = ref(false)   
        
        // 展示标签弹框
        function show() {
            isShow.value = true
        }
        
        // 隐藏标签弹框
        function close() {
            isShow.value = false
        }
        
        return { isShow, show, close }
    }
}
</script>

标签弹框组件内容

<!-- 标签弹框组件内容 -->
<template>
    <div v-show="isShow">
    	<!-- 此处省略一部分不重要得内容代码 -->
        <div @click="close">取消</div>
        <div @click="confirm">确认</div>
    </div>
</template>

<script>
export default {
    name: "tab",
    props: {
    	isShow: {
            type: Boolean,
            default: false
        }
    },
    setup(props, {emit}) {
    
    	// 隐藏标签弹框
    	function close() {
            emit('close')
        }
        
        // 点击确认后得操作
        function confirm() {
        
            /* 此处省略点击确认按钮后更新标签内容得业务代码 */
            
            close()
        }
        
        
        return { close, confirm }
    }
}
</script>

看完了我上面举例得代码后可以发现，简简单单得一个功能得实现，却涉及到两个组件，而且还需要父子组件相互通信来控制一些状态，这样不就把功能打散了嘛，即不够聚合。所以按照功能来抽离这些功能代码时，我会为他们创建一个 tabAlert.js 文件，里面存储着关于这个功能所有得变量与方法。

tabAlert.js文件中得大致结构是这样得：

// 引入依赖API
import { ref } from 'vue'

// 定义一些变量
const isShow = ref(false)     // 存储标签弹框得展示状态

export default function tabAlertFunction() {
    /* 定义一些方法 */
    
    // 展示标签弹框
    function show() {
    	isShow.value = true
    }
    
    // 关闭标签弹框
    function close() {
    	isShow.value = false
    }
    
    // 点击确认按钮以后得操作
    function confirm() {
        /* 此处省略点击确认按钮后更新标签内容得业务代码 */
        
        close()
    }
    
    return {
    	isShow,
        show,
        close,
        confirm,
    }
}

对于为何设计这样得结构，先从导出得方法来说，我把跟该功能相关得所有方法放在了一个函数中，最后通过return导出，是因为有时候这些方法会依赖于外部其它得变量，所以用函数包裹了一层，例如：

// example.js
export default function exampleFunction(num) {
	
    function log1() {
    	console.log(num + 1)
    }
    
    function log2() {
    	console.log(num + 2)
    }
    
    return {
    	log1,
        log2,
    }
}

从这个文件中我们发现，log1和log2方法都是依赖于变量num得，但我们并没有在该文件中定义变量num，那么可以在别得组件中引入该文件时，给最外层得exampleFunction方法传递一个参数num就行

<template>
    <button @click="log1">打印加1</button>
    <button @click="log2">打印加2</button>
</template>

<script>
import exampleFunction from './example'
import { num } from './getNum'  // 假设num是从别得模块中获取到得
export default {
    setup() {
    	let { log1, log2 } = exampleFunction(num)
    	
        return { log1, log2 }
    }
}
</script>

然后再来说说为什么变量得定义在我们导出函数得外部。再继续看我上面举得我项目中标签页功能得例子吧，用于存储标签弹框展示状态得变量isShow是在某个组件中定义得，同时标签组件也需要获取这个变量来控制展示得状态，这之间用到了父子组件通信，那么我们不妨把这个变量写在一个公共得文件中，无论哪个组件需要用到得时候，只需要导入获取就好了，因为每次获取到得都是同一个变量

这样一来，岂不是连父子组件通信都省了嘛？

我们把刚刚封装好得tabAlert.js用到组件中去，看看是什么效果

侧边栏组件内容

<!-- 侧边栏组件内容 -->
<template>
    <aside>
    	<div @click="show">新增标签</div>
        <tab-alert/>
    </aside>
</template>

<script>
import tabAlert from '@/components/tabAlert/index'
import tabAlertFunction from '@/use/tabAlert'
export default {
    name: "tab",
    components: {
    	tabAlert
    },
    setup() {
    	
        let { show } = tabAlertFunction()
        
        return { show }
    }
}
</script>

标签弹框组件内容

<!-- 标签弹框组件内容 -->
<template>
    <div v-show="isShow">
    	<!-- 此处省略一部分不重要得内容代码 -->
        <div @click="close">取消</div>
        <div @click="confirm">确认</div>
    </div>
</template>

<script>
import tabAlertFunction from '@/use/tabAlert'
export default {
    name: "tab",
    setup() {
        
        let { isShow, close, confirm } = tabAlertFunction() 
        
        return { isShow, close, confirm }
    }
}
</script>

这时候再翻上去看看最初得代码，有没有感觉代码抽离后，变得非常规整，而且组件中少了很多得代码量。

这样通过功能来将变量和代码聚集在一起得方法，我个人认为是比较好管理得，倘若之后有一天想在该功能上新增什么小需求，只要找到tabAlert.js这个文件，在里面写方法和变量即可

展示环节
我就是按照这样得方法，对我原本得代码进行了抽离，下面给大家看几组抽离前和抽离后得代码对比

对比一
抽离前

<template>
  <div class="import-config-container" v-show="isShow">
    <div class="import-config-alert">
      <div class="close-import-config-alert" @click="closeAlert"></div>
      <div class="import-config-alert-title">导入配置</div>
      <div class="import-config-alert-remind">说明：需要上传之前保存导出得xxx.json配置文件，文件中得信息会完全覆盖当前信息</div>
      <form action="" class="form">
        <label for="import_config_input" class="import-config-label">
          上传配置文件
          <i v-if="hasFile == 1" class="fas fa-times-circle uploadErr uploadIcon"/>
          <i v-else-if="hasFile == 2" class="fas fa-check-circle uploadSuccess uploadIcon"/>
        </label>
        <input id="import_config_input" type="file" class="select-file" ref="inputFile" @change="fileChange">
      </form>
      <lp-button type="primary" class="import-config-btn" @_click="importConfig">确认上传</lp-button>
    </div>
  </div>
</template>

<script>
import {ref, inject} from 'vue'
import lpButton from '../../public/lp-button/lp-button'
export default {
    props: {
      isShow: {
        type: Boolean,
        default: true
      }
    },
    components: {
        lpButton
    },
    setup(props, {emit}) {
        const result = ref('none')     // 导入得结果
        const isUpload = ref(false)    // 判断是否上传配置文件
        const isImport = ref(false)    // 判断配置是否导入成功
        const isLoading = ref(false)   // 判断按钮是否处于加载状态
        const inputFile = ref(null)    // 获取文件标签
        const hasFile = ref(0)         // 判断文件得传入情况。0：未传入  1: 格式错误  2：格式正确
        const $message = inject('message')
        // 导入配置
        function importConfig() {
          let reader = new FileReader()
          let files = inputFile.value.files
          if(hasFile.value == 0) {
            $message({
              type: 'warning',
              content: '请先上传配置文件'
            })
          }
          else if(hasFile.value == 1) {
            $message({
              type: 'warning',
              content: '请上传正确格式得文件，例如xx.json'
            })
          }
          else if(hasFile.value == 2) {
            reader.readAsText(files[0])
            reader.onload = function() {
              let data = this.result
              window.localStorage.navInfos = data
              location.reload()
            }
          }
        }
        // 关闭弹窗
        function closeAlert() {
          emit('closeImportConfigAlert', false)
          hasFile.value = 0
        }
        function fileChange(e) {
          let files = e.target.files
          if(files.length === 0) {
            $message({
              type: 'warning',
              content: '请先上传配置文件'
            })
          }
          else {
            let targetFile = files[0]
            if(!/\.json$/.test(targetFile.name)) {
              hasFile.value = 1
              $message({
                type: 'warning',
                content: '请确认文件格式是否正确'
              })
            } else {
              hasFile.value = 2
              $message({
                type: 'success',
                content: '文件格式正确'
              })
            }
          }
        }
        
        return {
          result, 
          isUpload,
          isImport, 
          isLoading,
          importConfig, 
          closeAlert,
          inputFile,
          fileChange,
          hasFile
        }
    }
}
</script>

抽离后

<template>
  <div class="import-config-container" v-show="isShowImportAlert">
    <div class="import-config-alert">
      <div class="close-import-config-alert" @click="handleImportConfigAlert(false)"></div>
      <div class="import-config-alert-title">导入配置</div>
      <div class="import-config-alert-remind">说明：需要上传之前保存导出得xxx.json配置文件，文件中得信息会完全覆盖当前信息</div>
      <form action="" class="form">
        <label for="import_config_input" class="import-config-label">
          上传配置文件
          <i v-if="hasFile == 1" class="fas fa-times-circle uploadErr uploadIcon"/>
          <i v-else-if="hasFile == 2" class="fas fa-check-circle uploadSuccess uploadIcon"/>
        </label>
        <input id="import_config_input" type="file" class="select-file" ref="inputFile" @change="fileChange">
      </form>
      <lp-button type="primary" class="import-config-btn" @_click="importConfig">确认上传</lp-button>
    </div>
  </div>
</template>

<script>
/* API */
import { inject } from 'vue'
/* 组件 */
import lpButton from '@/components/public/lp-button/lp-button'
/* 功能模块 */
import importConfigFunction from '@/use/importConfig'
export default {
    components: {
        lpButton
    },
    setup() {
        const $message = inject('message')
        
        const { 
          isShowImportAlert,
          handleImportConfigAlert,
          result,  
          isUpload, 
          isImport, 
          isLoading, 
          importConfig, 
          closeAlert, 
          inputFile, 
          fileChange, 
          hasFile 
        } = importConfigFunction($message)
        
        return {
          isShowImportAlert,
          handleImportConfigAlert,
          result, 
          isUpload,
          isImport, 
          isLoading,
          importConfig, 
          closeAlert,
          inputFile,
          fileChange,
          hasFile
        }
    }
}
</script>

抽离出得代码文件

// 导入配置功能
import { ref } from 'vue'

const isShowImportAlert = ref(false),   // 导入配置弹框是否展示
      result = ref('none'),             // 导入得结果
      isUpload = ref(false),            // 判断是否上传配置文件
      isImport = ref(false),            // 判断配置是否导入成功
      isLoading = ref(false),           // 判断按钮是否处于加载状态
      inputFile = ref(null),            // 获取文件元素
      hasFile = ref(0)                  // 判断文件得传入情况。0：未传入  1: 格式错误  2：格式正确
      
export default function importConfigFunction($message) {
  
    // 控制弹框得展示
    function handleImportConfigAlert(value) {
        isShowImportAlert.value = value
        if(!value) hasFile.value = 0
    }

    // 上传得文件内容发生改变
    function fileChange(e) {
        let files = e.target.files
        if(files.length === 0) {
            $message({
            type: 'warning',
            content: '请先上传配置文件'
            })
        }
        else {
            let targetFile = files[0]
            if(!/\.json$/.test(targetFile.name)) {
                hasFile.value = 1
                $message({
                    type: 'warning',
                    content: '请确认文件格式是否正确'
                })
            } else {
            hasFile.value = 2
                $message({
                    type: 'success',
                    content: '文件格式正确'
                })
            }
        }
    }

    // 导入配置
    function importConfig() {
        let reader = new FileReader()
        let files = inputFile.value.files
        if(hasFile.value == 0) {
          $message({
            type: 'warning',
            content: '请先上传配置文件'
          })
        }
        else if(hasFile.value == 1) {
          $message({
            type: 'warning',
            content: '请上传正确格式得文件，例如xx.json'
          })
        }
        else if(hasFile.value == 2) {
          reader.readAsText(files[0])
          reader.onload = function() {
            let data = this.result
            window.localStorage.navInfos = data
            location.reload()
          }
        }
    }

    return {
        isShowImportAlert,
        result,
        isUpload,
        isImport,
        isLoading,
        inputFile,
        hasFile,
        handleImportConfigAlert,
        fileChange,
        importConfig,
    }
}