来自 Vue 外部的 Vue 组合 API

Question

所以，我开始使用 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 中使用它。

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

Answer 1

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

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

Vue.use(VueCompositionApi);

来自 Vue 外部的 Vue 组合 API

Vue Composition API from outside of Vue

javascript

vue.js

vuejs2

vuejs3

vue-composition-api