vue 3의 구성 API를 사용하여 플러그인을 보다 쉽게 사용할 수 있는 방법

vue 3의 구성 API를 사용하여 플러그인을 보다 쉽게 사용할 수 있는 방법

추가할 때vuex또는vue-routervue의 플러그인과 옵션 api를 사용하여this키워드를 지정합니다.

main.discloss.main.discloss.

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);

랜덤 컴포넌트표시하다

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

그thiscomposition api에서는 키워드를 사용할 수 없기 때문에 많은 반복 코드가 발생합니다.를 사용하려면store,vue-router또는i18n라이브러리 다음을 Import 및 정의해야 합니다.

랜덤 컴포넌트vue with composition api

<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에서 할 수 있는 것처럼 이러한 Import와 정의를 피하고 플러그인을 쉽게 사용할 수 있는 방법이 있습니까?

Composition API 및 스크립트 설정에는 이 작업을 수행할 수 있는 기본 제공 방법이 없습니다.

할 수 있는 일은 다음과 같습니다.

작성하다plugins.jsImport할 공통 바인딩을 내보내는 파일입니다.예를 들어 다음과 같습니다.

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

Import는 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 setupMixins 대신 컴포넌트용입니다.컴포넌트를 위한 옵션 API, 코드를 다시 작성하기 위한 컴포지션 API 또는 고급 유스케이스가 있습니다.만약 그것이 흥미롭게 들린다면 나는 그것에 대한 기사를 썼다.

언급URL : https://stackoverflow.com/questions/70957234/easier-way-to-use-plugins-with-the-composition-api-in-vue-3