Как переделать mixin в Composition API в VUE3?

Question

[Евгений]

Прошу прощения за такой возможно "базовый вопрос", но спросить не у кого больше. Я не fronted разработчик, поэтому и нужна подсказка.

Задача была избавиться от mixin который перекочевал из vue2. Я всё переделал на Compositon API, но есть один момент который не могу понять.

// Во простой пример примеси (CoreMixin), где при инициализации компонента, через Axios подгружаются доп данные с сервера. И после вызывается финальный метод "responseLazySuccess" - после загрузки данных. Который я в компоненте, где применил этот Mixin, вызываю (перезаписываю), для каких то доп целей (дальнейших действий). Проблема именно в нём, как Composition API его вызвать.

export default {
    data() {
        return {
            lazyPropsLoading: false,
            lazyPropData: null
        }
    },
    mounted() {
            this.getLazyPropsRequest();
    },
    methods: {
        getLazyPropsRequest() {
            this.lazyPropsLoading = true;
            this.CoreService.getGeneralRequestLazy(....)
                .then(response => {
                    if (response && response.status && response.status == 200) {
                        this.lazyPropData = response.data;
                        this.lazyPropsLoading = false;
                    }
                    this.responseLazySuccess();
            });
        },
        responseLazySuccess() {}
    }
};

<template>
    <AuthLayout>
    </AuthLayout>
</template>

<script>
import CoreMixin from "@core/Mixins/CoreMixin.js";
export default {
    mixins: [CoreMixin],
    methods: {
        responseLazySuccess() {
            // Вот именно этот метод как раз и вызываю 
            // дальнейшие действия, после получения данных с сервера
        }
    }
}
</script>

Что получилось в Composition API:
Я вынес всё в отдельный файл - CoreMixinTest.js

import { ref, onMounted } from "vue";

export default function () {
    const lazyPropsLoading = ref(true);
    const lazyCustomProps = ref(null);

    onMounted(() => {
        getLazyPropsRequest();
    })

    function getLazyRequest() {
        lazyPropsLoading.value = true;
        CoreService.getGeneralRequestLazy(....)
                .then(response => {
                    if (response && response.status && response.status == 200) {
                        lazyPropData.value = response.data;
                        lazyPropsLoading.value = false;
                    }
                    responseLazySuccess();
            });
    }

    function responseLazySuccess() {
    }

    return {
        lazyPropsLoading,
        lazyCustomProps,
        responseLazySuccess
    }
}

И вот сам компонент работающий через CompositonAPI

<script setup>
import CoreMixinTest from "@core/Mixins/CoreMixinTest.js";
const { lazyPropsLoading, lazyCustomProps } = CoreMixinTest();

// Как мне тут сделать callback или перехватить мой метод responseLazySuccess() 
// который вызвается после совершения запроса в "CoreMixinTest"
</script>

<template>
    <AuthLayout>
    </AuthLayout>
</template>

Answer 1

[Aetae]

Ответ прост: callback не нужен. У тебя данные кладутся в lazyPropData. Просто работай с этим. Если нужно прям именно, что-то вызвать по получении - просто вешай watch на lazyPropData и готово. (Это касается и оригинального mixin).

Однако если прям очень хочется, то собсно передавай callback как callback:

export default function (responseLazySuccess) { 

const { lazyPropsLoading, lazyCustomProps } = CoreMixinTest(() => {
  // ...
});

Comments

[Евгений]

А т.е. просто отслеживать изменение в lazyCustomProps и всё?

watch(lazyCustomProps, (data) => {
    console.log(data)
})

Спасибо большое!