在 vue 3 中通过组合 api 使用插件的更简单方法

Question

当在 vue 中添加vuex或vue-router作为插件并使用 options api 时，您可以使用关键字访问这些插件this。

main.js

import { createApp } from 'vue';
import i18n from '@/i18n';
import router from './router';
import store from './store';

app.use(i18n);
app.use(store);
app.use(router);

随机组件.vue

<script>
    export default {
        mounted() {
            this.$store.dispatch('roles/fetchPermissions');
        },
    }
</script>

组合 api 中不再提供该this关键字，这会导致大量重复代码。要使用store,vue-router或i18n库，我必须导入并定义以下内容：

具有组合 api 的 RandomComponent.vue

<script setup>
    import { useStore } from 'vuex';
    import { useRouter } from 'vue-router';
    import { useI18n } from 'vue-i18n';

    const router = useRouter();
    const store = useStore();
    const { t } = useI18n();

    const { handleSubmit, isSubmitting, errors } = useForm('/roles/create', role, CreateRoleValidationSchema, () => {
        store.dispatch('notifications/addNotification', {
            type: 'success',
            title: t('create_success', { field: t('role', 1) }),
        });

        router.push({ name: 'roles' });
    });
</script>

有没有办法避免这些导入和定义，并有办法像我使用 options api 一样轻松使用这些插件？

Answer 1

在 Composition API 和脚本设置中没有内置的方法可以做到这一点。

你可以做的是：

创建一个plugins.js导出要导入的常见绑定的文件。例如：

export * from 'vuex'
export * from 'vue-router'
export * from 'vue-i18n'

然后你只需要做 1 次导入：

<script setup>
    import { useStore, useRouter, useI18n } from './plugins'

    const router = useRouter();
    const store = useStore();
    const { t } = useI18n();

    const { handleSubmit, isSubmitting, errors } = useForm('/roles/create', role, CreateRoleValidationSchema, () => {
        store.dispatch('notifications/addNotification', {
            type: 'success',
            title: t('create_success', { field: t('role', 1) }),
        });

        router.push({ name: 'roles' });
    });
</script>

您可以通过启动插件来更进一步，例如：

import { useStore, useRouter, useI18n } from './plugins'

export function initiateCommonPlugins() {
    const router = useRouter();
    const store = useStore();
    const { t } = useI18n();

    return { router, store, t }
}

然后你的代码将如下所示：

<script setup>
    import { router, store, t } from './initiate-plugins'

    const { handleSubmit, isSubmitting, errors } = useForm('/roles/create', role, CreateRoleValidationSchema, () => {
        store.dispatch('notifications/addNotification', {
            type: 'success',
            title: t('create_success', { field: t('role', 1) }),
        });

        router.push({ name: 'roles' });
    });
</script>

使用unplugin-auto-import插件

该插件可以消除您想要的所有导入，并且高度可定制。还没试过，不过看到有人推荐。

坚持使用选项 API

使用 Vue 3 并不意味着您必须使用 Composition API 来创建组件。您可以将 Options API 与script setup可组合项一起使用，而不是 Mixins。因此，用于组件的选项 API、用于重用代码或高级用例的组合 API。