关注点分离？实战教你使用vue3 hook 组合式api-2

持续创作，加速成长！这是我参与「掘金日新计划 · 6 月更文挑战」的第5天，点击查看活动详情

接上一篇 juejin.cn/post/711116…

上一篇我们讲到业务逻辑代码会分散vue组件各个选项里面，那么组合式api就在于把各业务逻辑合并到一个地方，实现关注点分离

关注点分离（Separation of concerns，SOC）是对只与“特定概念、目标”(关注点)相关联的软件组成部分进行“标识、封装和操纵”的能力，即标识、封装和操纵关注点的能力。是处理复杂性的一个原则。

要实现关注点分离，我们有很多方法，比如封装一个类或函数都可以

比如我们之前讲到的枚举类，封装枚举相关的业务

前端还没用过Enum枚举类？juejin.cn/post/711003…

但是有些我们封装成类或函数在vue里面确不是很方便

比如我们实现一个弹窗，点击打开按钮打开弹窗，取消关闭弹窗

<template>
  <div class="hello">

    <a-button @click="open">打开</a-button>
    <a-modal title="弹窗" @cancel="cancel" :visible="visible" @ok="submit">
      内容
    </a-modal>
  </div>
</template>

<script>

export default {
  name: 'HelloWorld',
  props: {
  },
  data(){
    return {
      visible:false
    }
  },
  methods:{
    submit(){
      this.visible = false ;
    },
    cancel(){
      this.visible = false ;
    },
    open(){
      this.visible = true;
    }
  }
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
</style>

可以看到这里，我们定义了一个属性：visible，定义了3个方法：submit，cancel，open

很多界面都需要弹窗，这部分代码基本上都要写一般，但是也不可能抽离一个弹窗组件，因为这个代码也够简单了，但是页面还有很多其他逻辑，会和这个业务逻辑混合，就不容易看出来代码逻辑

这里我们用组合式api来改造一下

<template>
  <div class="hello">

    <a-button @click="modalOp.open">打开</a-button>
    <a-modal v-bind="modalProps" v-on="modalHandler" @ok="submit">
      内容
    </a-modal>
  </div>
</template>

<script>
import { reactive } from 'vue'

//可以单独放一个文件，实现重用
const useModal = () => {
  const modalProps = reactive({
    visible:false
  });
  const modalOp = {
    open(){
      modalProps.visible = true;
    },
    close(){
      modalProps.visible = false;
    }
  }
  const modalHandler = {
    cancel(){
      modalProps.visible = false;
    },

  }
  return {
    modalProps,
    modalHandler,
    modalOp,
  }
}


export default {
  name: 'HelloWorld',
  props: {
  },
  setup (props ) {

 
    // 使用modal相关逻辑
    const {modalProps, modalHandler,  modalOp} = useModal();
    return {
      modalProps,
      modalHandler,
      modalOp,
    }
  },
  methods:{
    submit(){
      this.modalOp.close();
    }
  }
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
</style>

可以看到使用组合式api后，我们只定义了一个方法：submit和 setup里面初始化useModal

现在我们把modal相关的打开，关闭等都封装到useModal里面，业务只需要关心submit提交方法，这个组件是不是减少了很多无关联的业务代码

这是其实和Mixin功能差不多，都是把代码分离出去，但有点在于Mixin的组合是由vue控制的，使用组合式api，我们可以按照我们的业务自由控组如何合并到组件

总结：有了组合式api，可以更好的组合我们的代码啦