vue3 组合式API 逻辑拆分，再也不怕同事说我代码烂了

Ⅰ、前言

• vue2 我们对于复杂的逻辑会采用 mixin 去拆分；
• 当然，这也会引起很多问题，比如命名冲突，难以维护 ，复用性差的缺点；
• 那么 vue3 我们怎么逻辑拆分呢 ？ 组合式函数给了我们很好的解决方案；

文章目录

Ⅱ、组合式 API 逻辑拆分

<template>
  <button @click="cutNum">减一</button>
  <span>{{ num }}</span>
  <button @click="addNum">加一</button>
</template>
<script setup>
import { ref } from 'vue'
const num = ref(0);
function addNum() {  num.value += 1; }
function cutNum() {  num.value -= 1; }
</script>

我们创建一个 JS 文件， 例 ： [ useCount.js ] 👇

import { ref } from 'vue'
export default function useCount() {
	const num = ref(0);
	function addNum() {  num.value += 1; }
	function cutNum() {  num.value -= 1; }
	return { num ,  addNum , cutNum }
}

之前的 vue 文件 👇 , 就只需要解构使用了

<template>
  <button @click="cutNum">减一</button>
  <span>{{ num }}</span>
  <button @click="addNum">加一</button>
</template>
<script setup>
import useCount from './useCount'
const { num, addNum, cutNum }  = useCount()
</script>

Ⅲ、更是 (最小) 全局状态管理

父组件 👇

<template>
    <AddComp />
 	<NumComp />
    <CutComp />
</template>
<script setup>
import AddComp from './addComp .vue';
import NumComp from './numComp.vue';
import CutComp from './cutComp.vue';
</script>

拆分 3 个子组件 👇

<template>
  <div>
	<p>组件 A </p>
	<button @click='addNum'>加一</button>	
  </div>
</template>
<script setup>
import useCount from './useCount'
const { addNum }  = useCount()
</script>

<template>
  <div>
	<p>组件 B </p>
	<span>{{ num }}</span>
  </div>
</template>
<script setup>
import useCount from './useCount'
const { num }  = useCount()
</script>

<template>
  <div>
	<p>组件 C </p>
	<button @click='cutNum'>加一</button>	
  </div>
</template>
<script setup>
import useCount from './useCount'
const { cutNum }  = useCount()
</script>