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

前言

我们做了组件的拆分，对应的逻辑也都放到了对应的组件中。但是我们的代码逻辑写的其实还是比较乱的，都是对todos数据的操作，却要分散到各个组件中。我们能不能把这些逻辑都整合到一起呢？这样以后我们的UI变了，逻辑也是可以不变的。 vue3给我们提供了组合式Api也是有这方面考量的，我们可以把我们相同的逻辑封装成hooks，这样就可以实现业务逻辑和UI样式的拆分了。说干就干，我们先梳理下我们的业务逻辑有哪些。

todos 操作逻辑梳理

我们可以根据之前的业务需求，来梳理我们要封装的逻辑：

本地存储的封装
todos数据处理封装
1. 根据显示类型过滤todos数据
2. 完成所有todo时，修改todos数据状态
3. 当todos数据发生改变时，进行本地存储
todos操作逻辑封装
1. 添加todo
2. 编辑todo
3. 删除todo
监听原生事件封装
1. 监听显示类型的时候需要用

根据这些需求，我们封装的逻辑可以分为工具函数、todos数据模块、todos数据添加模块、todos数据编辑模块、todos数据移除模块。这些模块我们统称为hook，需要使用use作为函数前缀来进行规范（建议这样做，当然不这样做也是没问题的）。

如何保证todos数据的响应性？

我们的todos数据是全局都要使用到的，那么我们怎么能保证todos数据在每个组件中的更新，都能得到最新数据呢？
在vue2中我们可能会使用vuex来做全局状态管理，那在vue3中也必须这样吗？
之前我们介绍到的provide是可以传递响应式数据的，这就表明我们通过依赖注入也能保证数据的响应性。我们不再需要使用第三方库，也能简单实现全局状态管理啦。
举个简单的例子

<!-- 在 provider 组件内 -->
<script>
import { provide, ref } from 'vue'
export default {
  setup(){
    const location = ref('North Pole')
    function updateLocation() {
      location.value = 'South Pole'
    }
    provide('location', {
      location,
      updateLocation
    })
  }
}
</script>

<!-- 在 injector 组件 -->
<script >
import { inject } from 'vue'
export default {
  setup(){
    const { location, updateLocation } = inject('location')
    return {
      location,
      updateLocation
    }
  }
}
</script>

<template>
  <button @click="updateLocation">{{ location }}</button>
</template>

我们在父组件注入响应式数据和更新数据的方法。
子组件接收数据，当执行更新方法，对应的数据在父子组件会同步更新。

总结

我们对整个逻辑封装进行了梳理以及重点问题调研，下一节我们开始封装我们的逻辑。

vue3入门14 - 组件化 todoMvc 项目-逻辑梳理

前言

todos 操作逻辑梳理

如何保证todos数据的响应性？

总结