时间戳

首页 > 解决方案 > 在 Options API (Vue Js) 中使用 Composition API

javascript - 在 Options API (Vue Js) 中使用 Composition API

问题描述

是否可以在使用 Options API 的传统组件中导入和使用新的 Composition API？

这是我的场景：

// ComponentA.js
import { reactive } from '@vue/composition-api'

export default {
  
  ////////////////////////////////////////////////////////////////
  setup() {

    //////////////////////////////////////////////
    // State
    const state = reactive({ 
      isSearching: false,
      searchText: '',
      isShowMoreResults: false,
      resultItems: [] 
    })

    //////////////////////////////////////////////
    const search = async (searchText) => {
      console.log("Searching... ", searchText)
    }

    //////////////////////////////////////////////
    const clear = async () => {
      console.log("Clear search")
    }

    //////////////////////////////////////////////
    const nextResults = async () => {
      console.log("Next Results")
    }

    ////////////////////////////////////////////////////////////////
    return {
      state,
      search,
      clear,
      nextResults
    }
  }
}

我想在我的“选项 API”样式组件中使用它。我怎样才能导入这个？

我试过这个，但它不起作用。导入工作正常，但我不知道如何调用 setup 方法并获取所有导出的字段：

import useComponentA from 'ComponentA.js'

let { state } = useComponentA()

标签： javascriptvue.jsvue-componentvue-composition-api

解决方案

您编写的 ComponentA.js 就是组件本身。您返回state了 ，这将成为$data.state，以及您的 3 个函数search、clear和nextResults，它们将成为组件上的方法。如果你现在想使用 ComponentA，你只需将它导入到一些使用 ComponentA 的 ComponentB 中，就像这样

// ComponentB
import ComponentA from 'ComponentA.js'

export default {
  components: { ComponentA },
  // ...
}

如果您要单独使用 Options API 来编写 ComponentA，它将如下所示：

export default {
  data() {
    return {
      isSearching: false,
      searchText: '',
      isShowMoreResults: false,
      resultItems: [] 
    };
  },
  methods: {
    async search() {...},
    async clear() {...},
    async nextResults() {...}
  }
}

在您的 ComponentA 示例中，您根本没有真正使用 Options API。您可以像这样混合使用这两个 API：

// ComponentA.js
import { reactive } from '@vue/composition-api'

export default {
  setup() {
    const state = reactive({ 
      isSearching: false,
      searchText: '',
      isShowMoreResults: false,
      resultItems: [] 
    })
    return { state }
  },
  methods: {
    async search() {...},
    async clear() {...},
    async nextResults() {...}
  }
}

IMO，如果您有一些专门属于组件的逻辑，您只会混合 API。例如，如果您有一些表单组件和一个用于处理该表单唯一的提交事件的方法。虽然它足够新，但实际上并没有标准的约定或最佳实践。

更新：我在这里修改了我的意见。在 Vue.js 中更多地使用 Typescript 之后，Composition API 在组件数据的类型支持方面更加友好。API 还有助于“与相同逻辑关注点相关”的代码“搭配”。请参阅Composition API 文档以了解其推理。总结一下：

  1. 组合 API 可以在 Typescript 中更好地创作组件
  2. 组合 API 允许开发人员在复杂组件中“搭配”具有相似逻辑关注点的代码（而不是让它们散布在整个组件中）

诚然，上面的第 2 点不太适用于小型、简单的组件，但如果您使用的是 Typescript，第 1 点仍然非常适用。

推荐阅读