使用通过提供功能全球导入的VUE 3组件中的类

Question

我正在vue 3上构建一个应用程序，其中我为我的API调用构建了一个api类：

import axios from 'axios'

export default class {

    /**
     * Send GET Request
     * @param  {string} url
     * @return {Promise}
     */
    get(url) {
        return new Promise((resolve, reject) => {
            axios.get(url, {}).then(response => {
                if (response.status === 200) {
                    return resolve(response);
                }
            }).catch((error) => {
                return reject(error);
            })
        });
    }

    /**
     * Send POST Request
     * @param  {string} url
     * @param  {object} payload Data object to send
     * @return {Promise}
     */
    post(url, payload) {
        return new Promise((resolve, reject) => {
            axios.post(url, payload, {}).then(response => {
                if (response.status === 200) {
                    return resolve(response);
                }
            }).catch((error) => {
                return reject(error);
            })
        });
    }

    /**
     * Send FIND Request
     * @param  {string} url
     * @return {Promise}
     */
    find(url) {
        return new Promise((resolve, reject) => {
            axios.get(url, {}).then(response => {
                if (response.status === 200) {
                    return resolve(response);
                }
            }).catch((error) => {
                return reject(error);
            })
        });
    }

}

我想在我的vue组件中使用此类功能，为此我导入_API.JS文件和插入.provide（'$ api'，apis） create> createApp 在app.js中 file：

import { createApp, h } from 'vue';
import { createInertiaApp } from '@inertiajs/inertia-vue3';
import api from './Models/_api'

const apis = new api();

createInertiaApp({
    resolve: (name) => require(`./Pages/${name}.vue`),
    setup({ el, app, props, plugin }) {
        return createApp({ render: () => h(app, props) })
            .use(plugin)
            .mixin({ methods: { route } })
            .provide('$api', apis)
            .mount(el);
    },
});

在我的组件中，我使用的是：

<template>
   //HTML Files
</template>
export default {
    data(){
        return{
            tableData:[],
        }
    },
    methods:{
        fetchData(){

            this.$api.post('/api/user-data', {}).then(response=>{
                if(response.status === 200)
                {
                    this.tableData = response.data.data
                }
            });
        }
    },
    created(){
        this.fetchData();
    },
}
</script>

使用this。$ api我会遇到错误：

TypeError：无法读取未定义的属性（阅读'post'）

屏幕截图：

当我尝试console.log（this。$ api）时，它返回undefined

下面的解决方案在VUE 2中工作

vue 2它工作正常：

我只需要在app.js中启动类并添加它到原型，它效果很好。

VUE 2代码app.js：

import { App, plugin } from '@inertiajs/inertia-vue'
import Vue from 'vue'
import api from './Models/_api'

const apis = new api();
Vue.prototype.$api = apis;

const el = document.getElementById('app')

new Vue({
    store: store,
    render: h => h(App, {
        props: {
            initialPage: JSON.parse(el.dataset.page),
            resolveComponent: name => import(`NitsPages/${name}`).then(module => module.default),
        },
    }),
}).$mount(el)

Answer 1

这与Vue3保留_和$前缀有关。

以_或$开头的属性不会在组件实例上代理，因为它们可能与Vue的内部属性和API方法冲突。您将必须这样访问它们。$ data._property。

因此，请尝试以下操作：

this.$data.$api.post(...)

就个人而言，我认为使用这两个常见的惯例并将其保留为内部使用并不理想。但这就是它。您可以在这里阅读更多有关它的信息。
https://github.com/vuejs/vuejs/vue/issues/5879

Answer 2

您可以将API类作为全局属性添加到VUE 3实例。

这在

例如：

main.js ，

import { createApp, h } from 'vue';
import { createInertiaApp } from '@inertiajs/inertia-vue3';
import api from './Models/_api'

const apis = new api();

createInertiaApp({
    resolve: (name) => require(`./Pages/${name}.vue`),
    setup({ el, app, props, plugin }) {
        const app = createApp({ render: () => h(app, props) });
        app.config.globalPoperties.api = apis;
        return 
            .use(plugin)
            .mixin({ methods: { route } })
            .provide('$api', apis)
            .mount(el);
    },
});

然后使用this.api在您的VUE组件中可呼叫