通过 OptionsAPI 使用可组合项

Question

我们的团队正在将应用程序从 Vue 2 转换为 3，我正在处理最后的步骤。 我正在研究是否可以将 mixin 文件转换为可组合文件。我还没有找到任何文档来支持是否可以将可组合项与 optionsAPI 一起使用。 我尝试了一些示例，但我看到了局限性：

COMPOSABLE 文件使用Composables：

import { ref, computed } from 'vue'

export default () => {
    let first = ref('First')
    let last = ref('Last')
    let mycomputed = computed(() => {
        return `${first.value} *** ${last.value}`
    })

    return {
        first, mycomputed
    }
}

组件：

import useComposables from '@/utils/useComposable'

created () {
        let { first, mycomputed } = useComposables()
        console.log('first', first.value)
        console.log('mycomputed', mycomputed.value)
    },

<template>
    mycomputed {{ mycomputed }}
</template>

因此，我看到当我尝试对模板中的

mycomputed

计算变量进行插值时，该组件无权访问计算变量，因为它不在计算选项中并且不属于“this”。

我似乎找不到任何文档来支持使用带有选项 API 的可组合项。 我错过了什么还是这是不行的？

谢谢

Answer 1

OP 通过使用以下方法解决了这个问题：

setup() {
    let { first, mycomputed } = useComposables()

    return {
        first, mycomputed
    }
},