🌱vue3 реализует "useAxios" только с ref, 12 строк кода

внешний интерфейс TypeScript Vue.js

ref

ref — это недавно добавленный API в vue3. Его смысл в том, чтобы определить переменную, которую можно «отследить» отдельно. Все переменные в vue2 должны быть вdataОпределено в vue3, добавленоsetupобласти, где мы можем быть более гибкимиопределить переменную.

vue3

export default defineComponent({
    setup() {
        const countA = ref(1);
        return { count };
    },
});

vue2

export default {
    data() {
        return { countA: 1 };
    },
};

Некоторые люди могут спросить, каковы преимущества этого нового API vue3?

Преимущество заключается в том, что бизнес-код js можно разделить более тонко, например, в приведенном выше примере.countA, он данные, возвращаемые интерфейсом. В общем, прежде чем запрос будет успешным, интерфейс должен отображать «анимацию загрузки». Отображение и скрытие этой «анимации загрузки» требует управления переменной. Как правило, мы называем этоisLoading:

vue2

export default {
    data() {
        return { countA: 1, isLoading };
    },

    async mounted() {
        this.isLoading = true;
        const { data } = await axios.get('/api');
        this.countA = data;
        this.isLoading = false;
    },
};

Вот так пишется vue2.Полагаю все так пишут.Кажется, дальше инкапсулировать нечего,да?Далее используем vue3refAPI пытается обернуть:

vue3

export default defineComponent({
    setup() {
        const [isLoading, countA] = useGet('/api');
        return { isLoading, countA };
    },
});

export function useGet(url) {
    const isLoading = ref(true);
    const dataSource = ref();
    axios
        .get(url)
        .then(({ data }) => {
            dataSource.value = data;
        })
        .finally(() => {
            isLoading.value = false;
        });
    return [isLoading, dataSource];
}

Синтаксис ref здесь не рассматривается, просто нужно знатьisLoading.value=falseэто датьisLoadingЗадание можно сделать, подробнееvue официальная документация

В это время мы обнаружили, что сцену, которую нельзя было абстрагировать, теперь можно абстрагировать.useGetТеперь код для подсчета дядек состоит всего из 12 строк.

v-use-axios

Следуя изложенным выше идеям, я сделал более полный пакет для axios,v-use-axios, Код не очень логичен или сложен, около 100 строк, надеюсь, что заинтересованные друзья смогут его улучшить вместе со мной.

Группа WeChat

Спасибо за чтение, если у вас есть какие-либо вопросы, вы можете добавить меня в WeChat, я приглашу васГруппа WeChat(Из-за ограничения Tencent на 200 участников в группах WeChat после того, как более 200 участников должны быть привлечены участниками группы)

Категории