Vue 外部的 Vue 组合 API答案

【问题标题】：Vue Composition API from outside of VueVue 外部的 Vue 组合 API
【发布时间】：2020-08-20 23:17:11
【问题描述】：

所以，我开始使用 Vue Composition API，它很棒。我在一个有 Vue 组件和 Vanilla JS 的项目中使用它。我正在 Vue 中构建一个通知系统，因为我们正在慢慢地以这种方式移动所有内容。

我目前有以下代码用于添加通知

export const useNotification = () => {
    const notifications              = ref([]);
    const visibleNotifications = computed(() => {
        return notifications.value.filter(notification => notification.visible === true).reverse();
    });

    const add = (notification: Notification) => {
        notifications.value.push(notification);
    };
};

我可以从 Vue 中完美地添加这个，但我还想从系统的 vanilla JS 部分添加一个通知。我尝试过使用useNotification().add()，但出现以下错误[vue-composition-api] must call Vue.use(plugin) before using any function. 基本上，它希望我在Vue 中使用它。

关于我如何使它工作的任何想法？

【问题讨论】：

我相信这是将vue-composition-api 与vue2 一起使用的缺点。如果你用vue3，应该没问题。
嗯...目前还不能完全升级到 Vue3！
在this SO 问题之后，虽然仍在使用 Vue2，但似乎如果我将 vue 导入到我的通知 TS 文件中，则可以解决。试一试，它做到了！

标签： javascript vue.js vuejs2 vuejs3 vue-composition-api

【解决方案1】：

由于将vue-composition-api 与vue2 一起使用的缺点，并且遵循SO 问题here,，我需要在导出的TS 文件的类型中添加以下内容

import Vue               from 'vue';
import VueCompositionApi from '@vue/composition-api';

Vue.use(VueCompositionApi);

【讨论】：