빠른 팁!!!

안녕하세요 여러분 👋

요청을 할 때 모든 구성 요소에 동일한 코드를 작성하는 데 정말 지쳤습니다. 나는 일을 단순하게 만들고 싶고 내 생각에 당신도 원할 것입니다. 그런 것들에 대한 팁을 보려면 내 예를 확인하십시오 😃.

현재 API에서 무언가를 얻고 싶을 때 아래 코드를 작성합니다 ... 적어도 저는 그랬습니다 😃

<template>
  <div class="section-orders">
    <ul v-if="!loading && orders.length" class="orders">
      <li v-for="order in orders" :key="order.id">{{ order.name }}</li>
    </ul>

    <span v-if="loading">Loading...</span>

    <span v-if="errorMessage">{{ errorMessage }}</span>
  </div>
</template>

<script>
/**
 * External dependencies.
 */
import axios from 'axios';
import { ref } from '@vue/composition-api';

export default {
  name: 'OrdersSection',

  setup() {
    const errorMessage = ref('');
    const loading = ref(false);
    const orders = ref([]);
    const fetchOrders = async () => {
      if (loading.value) {
        return;
      }

      errorMessage.value = '';

      try {
        loading.value = true;
        const response = await axios.get('/orders');
        orders.value = response.data;
      } catch (error) {
        errorMessage.value = 'An error has ocurred!';
      } finally {
        loading.value = false;
      }
    };
    fetchOrders();

    return {
      orders,
      loading,
      errorMessage,
    };
  },
};
</script>

하나의 구성 요소에서만 사용하려는 경우에는 괜찮습니다. 그러나 다른 구성 요소에서 주문을 검색하려는 경우 위의 코드를 복사하거나 구성 함수를 만들어 논리를 추출할 수 있습니다.

다음과 같이 보일 수 있습니다.

<template>
  <div class="section-orders">
    <ul v-if="!loading && orders.length" class="orders">
      <li v-for="order in orders" :key="order.id">{{ order.name }}</li>
    </ul>

    <span v-if="loading">Loading...</span>

    <span v-if="errorMessage">{{ errorMessage }}</span>
  </div>
</template>

<script>
/**
 * Internal dependencies.
 */
import useOrders from '@/components/bank-form/use-orders';

export default {
  name: 'OrdersSection',

  setup() {
    const { loading, errorMessage, orders } = useOrders();

    return {
      orders,
      loading,
      errorMessage,
    };
  },
};
</script>

및 useOrders 구성 함수:

/**
 * External dependencies.
 */
import axios from 'axios';
import { ref } from '@vue/composition-api';

export default function useOrders() {
    const errorMessage = ref('');
    const loading = ref(false);
    const orders = ref([]);
    const fetchOrders = async () => {
        if (loading.value) {
            return;
        }

        errorMessage.value = '';

        try {
            loading.value = true;
            const response = await axios.get('/orders');
            orders.value = response.data;
        } catch (error) {
            errorMessage.value = 'An error has ocurred!';
        } finally {
            loading.value = false;
        }
    };
    fetchOrders();

    return {
        orders,
        loading,
        errorMessage,
    };
}

엄청난!!!!!


그러나 얼마 후 다른 요청에 대해 동일한 논리를 수행해야 하며 동일한 "로드 중, errorMessage 및 데이터"상태를 작성하는 것이 지루해집니다.

이것은 @cytools/vue-query를 사용하면 매우 쉽습니다.

다음은 예입니다.

<template>
  <div class="section-orders">
    <ul v-if="!isLoading && orders.length" class="orders">
      <li v-for="order in orders" :key="order.id">{{ order.name }}</li>
    </ul>

    <span v-if="isLoading">Loading...</span>

    <span v-if="error">{{ error }}</span>
  </div>
</template>

<script>
/**
 * Internal dependencies.
 */
import axios from 'axios';
import { useQuery } from '@cytools/vue-query';

export default {
  name: 'OrdersSection',

  setup() {
    const { isLoading, error, data: orders } = useQuery(
        'orders',
        async () => {
          return (await axios.get('/orders')).data;
        },
        {
          defaultData: [],
        },
    );

    return {
      orders,
      isLoading,
      error,
    };
  },
};
</script>

더 적은 코드로 모든 작업을 수행했으며 키를 기반으로 데이터를 무료로 캐싱합니다.

다음은 자세한 내용을 확인할 수 있는 라이브러리 링크입니다. -- https://github.com/cytools/vue-query

위의 예보다 훨씬 더 재미있는 것이 있습니다.