vue3.0中用组合API的形式代替vue2.0混入（mixins）-CRMEB社区

vue3.0中用组合API的形式代替vue2.0混入（mixins）

管理

编辑

删除

mixin这个函数是非常霸道的，局部使用还好，如果是全局使用，在项目比较大的时候，个人觉得不是很好，在vue2的时候，因为没有组合式API这一说法，所以mixin对开发人员来说能解决好多事情。但是到了vue3，这种方式已经不推荐使用了，因为我们在vue3中，JS都是在setup里面执行的，这个时候如果我们在外面写一些公共的JS文件，然后暴露出来，在需要使用到的组件里面按需引入，这种比mixin觉得更好。下面就介绍一下使用组合api的形式实现发送验证码的逻辑，来代替vue2.0中的mixin。因本文只讨论vue3.0的实现方式，对vue2.0实现的逻辑不在讨论。是实现方式比较简单直接上代码。

1. 首先在utils文件夹中新建一个 useVerifyCode.js文件，文件的实现过程如下；

import { ref} from 'vue'
import { verifyApi, getShortKeyApi } from '@/api/public.js'
const disabled = ref( false )
const text = ref( '获取验证码' )
//发送验证码
const sendCode = () => {
  if ( disabled.value ) return
  disabled.value = true
  let n = 60
  text.value = '剩余 ' + n + 's';
  const run = setInterval( () => {
    n = n - 1
    if ( n < 0 ) {
      clearInterval( run )
    }
    text.value = '剩余 ' + n + 's'
    if ( text.value < '剩余 ' + 0 + 's' ) {
      disabled.value = false
      text.value = '重新获取'
    }
  }, 1000 )
}
// 发送验证码逻辑
export function useSendCode () {
  return { text, disabled, sendCode }
}

// 获取短信验证码与key
export function useCmsKeyVerify () {
  //接受手机号码
  const getKeyVerify = ( phone ) => {
    getShortKeyApi().then( async ( res ) => {
      const cmsKey = res.data.key
      const data = {
        phone: phone,
        key: cmsKey,
        types: 0
      }
      await verifyApi( data )
        .then( ( res ) => {
          sendCode()
          console.log(‘发送成功’)
        } )
        .catch( ( error ) => {
          console.log(‘发送失败’)
        } )
    } )
  }

  return { getKeyVerify }
}

这里定义一个发送验证码的逻辑，返回了disabled 与text两个值这两个值将作为其他组件使用时调用的两个重要参数。其逻辑是点击发送的逻辑是点击”获取验证码“时验证成功时，将显示文字更改'剩余 ' + n + 's'， 60s完成后文字将变成”重新获取“倒计时过程中不能重复发送验证码；以上就是在组合api中完成发送验证码的逻辑；

在组件中如何使用，请看下文。

import { ref, reactive } from 'vue'
import { useSendCode, useCmsKeyVerify } from '@/utils/useVerifyCode.js';

// 这里将获取组合函数的api retrun text, disabled, sendCode 以及函//数并称
let { text, disabled, sendCode } = useSendCode()
let { getKeyVerify } = useCmsKeyVerify()
// 获取vuex存取变量
// 发送验证码
const sendVerificationCode = (): void => {
  if ( !isSendCode.value || disabled.value ) return false
  getKeyVerify( formData.phone )
}

在使用过程中组合api的函数还时特别简单，只要引入即可，其他的样式问题，这里将不再展示。以上的代码是基于vue3.0版本的程序编写组合api开发。该方法也可进一步优化，需要的可自行修改。