vue3 setup 组合式api使用 操作文件单独提出 类似后台的控制器

vue3 操作后新增的setup 语法糖 其本身的特性 在 data,computed的property等属性之前 运行。

即页面渲染之前 setup 就存在了。

我们就可以利用setup 的优势 将一些 调取api 数据 返回赋值 ，数据过滤，等接口提取到一个单独的js/ts文件中进行调整即可，而我们的vue页面 只需要在setup中return 声明的数据就行了。

// src/composables/useRepositoryNameSearch.js

import { ref, computed } from 'vue'

export default function useRepositoryNameSearch(repositories) {
  const searchQuery = ref('')
  const repositoriesMatchingSearchQuery = computed(() => {
    return repositories.value.filter(repository => {
      return repository.name.includes(searchQuery.value)
    })
  })

  return {
    searchQuery,
    repositoriesMatchingSearchQuery
  }
}

这是官方代码的一个示例 

组合式api核心就 在这个文件中 ，通过export 到处 再通过vue 响应式应用声明数据，返回

// src/components/UserRepositories.vue
import { toRefs } from 'vue'
import useUserRepositories from '@/composables/useUserRepositories'
import useRepositoryNameSearch from '@/composables/useRepositoryNameSearch'
import useRepositoryFilters from '@/composables/useRepositoryFilters'

export default {
  components: { RepositoriesFilters, RepositoriesSortBy, RepositoriesList },
  props: {
    user: {
      type: String,
      required: true
    }
  },
  setup(props) {
    const { user } = toRefs(props)

    const { repositories, getUserRepositories } = useUserRepositories(user)

    const {
      searchQuery,
      repositoriesMatchingSearchQuery
    } = useRepositoryNameSearch(repositories)

    const {
      filters,
      updateFilters,
      filteredRepositories
    } = useRepositoryFilters(repositoriesMatchingSearchQuery)

    return {
      // 因为我们并不关心未经过滤的仓库
      // 我们可以在 `repositories` 名称下暴露过滤后的结果
      repositories: filteredRepositories,
      getUserRepositories,
      searchQuery,
      filters,
      updateFilters
    }
  }
}

在最后的vue页面中 ，我们看到 页面中的操作 都到了 我们新建的js文件中两个，在vue页面我们就看不到任何的 操作信息，数据信息也不影响我们的使用等。

个人看法： 跟mvc框架 很相似，在不断的向这个框架贴合，组合式api 可以让我们代码的逻辑性更加的清晰，如果我们吧 用户的放在一个js 商品的一个js 商品分类的一个js 在我们使用这些操作方法时 只需要到这个js 文件应用即可了，不需要一遍遍的引入api文件 ，在进行数据赋值等操作，是不是眼前一亮。