����λ�ã���ҳ > �����̳� > �̳� > ����̽�� Nuxt3 Composables������Ŀ¼�ܹ�������API�ĸ�ЧӦ��

����̽�� Nuxt3 Composables������Ŀ¼�ܹ�������API�ĸ�ЧӦ��

��Դ������������|��ʱ�䣺2024-06-23 16:03:09 |���Ķ���157��|�� ��ǩ�� T POS Pi T3 API Sable S C Ӧ�� �� |����������

ժҪ������������̽����Nuxt3 Composables���ص��������Ŀ¼�ܹ�������API�ĸ�ЧӦ�á�ͨ��ѧϰ���ģ����߽��ܹ����õ����������Nuxt3 Composables��������Ч��Ӧ�ó��򡣡�


title: ����̽�� Nuxt3 Composables������Ŀ¼�ܹ�������API�ĸ�ЧӦ��
date: 2024/6/23
updated: 2024/6/23
author: cmdragon

excerpt:
ժҪ������������̽����Nuxt3 Composables���ص��������Ŀ¼�ܹ�������API�ĸ�ЧӦ�á�ͨ��ѧϰ���ģ����߽��ܹ����õ����������Nuxt3 Composables��������Ч��Ӧ�ó��򡣡�

categories:

  • ǰ�˿���

tags:

  • Nuxt3
  • Composables
  • Ŀ¼�ܹ�
  • ����API
  • ��ЧӦ�ó���
  • ����Ӧ��
  • ѧϰ

ÉîÈë̽Ë÷ Nuxt3 Composables£ºÕÆÎÕĿ¼¼Ü¹¹ÓëÄÚÖÃAPIµÄ¸ßЧӦÓÃ

ÉîÈë̽Ë÷ Nuxt3 Composables£ºÕÆÎÕĿ¼¼Ü¹¹ÓëÄÚÖÃAPIµÄ¸ßЧӦÓÃ

ɨ���ע����΢����һ�ѣ� ������� ǰ����ȫջ������ɳ�

Nuxt3 Composables

1.1 Composables ����

Composables �� Vue 3 �е�һ�������ԣ������������֮�乲���ɸ��õ��߼��ͼ��㡣Composables ���������ģ����Dz�����������������Ƕ�����
JavaScript �ļ���ͨ��λ�� ~/composables Ŀ¼�¡����ǿ��԰������ݡ��������������Եȣ����Ա��κ�������벢ʹ�ã��Ӷ�������֯���룬�����ظ�������ߴ���Ŀɸ����ԡ�

1.2 ��װ������

�� Nuxt.js 3 �У����� Nuxt �����Ѿ������� Vue 3 �� Composables�������㲻��Ҫ���ⰲװ��ֻ������Ŀ�д���һ�� ~/composables
�ļ��У�Ȼ�������д��� .js �� .ts �ļ���������� Composables��

Nuxt �ṩ���Զ������ʹ�� Composables ��֧�֡�����Ҫʹ�� Composables ������У�ֻ��ʹ�� import ��䵼�룬���磺

// components/MyComponent.vue
import { useMyFunction } from "~/composables/myFunction.js"

export default {
  setup() {
    const result = useMyFunction();
    // ...
  }
}

1.3 ʹ�� Composables �Ļ�������

  1. ���� Composables ���� ~/composables �ļ����У�����һ���ļ����� myFunction.js ����������ĺ���������߼���
  2. ���� Composables ������Ҫʹ�õĵط���������� setup �����У�������Ҫ�� Composables��
  3. ʹ�� Composables ���ڵ���󣬿���ֱ��ʹ�� Composables �еı�����������������ԡ�
  4. ���º���Ӧʽ ������ Vue 3 ����Ӧʽϵͳ�������� Composables ���޸�����ʱ����������Щ���ݵ�������Զ����¡�

1.4 Composables �� Vue 3 ����Ӧʽϵͳ

Composables �е�����Ĭ������Ӧʽ�ģ���Ϊ������ Vue 3 �����һ���֡������� Composables �ж���һ�����ݶ����������ԣ����������ʹ������Vue
�ı�����ϵͳ�������ݱ仯ʱ�Զ�������������磺

// myFunction.js
export const myData = ref(0);

export function increment() {
  myData.value++;
}

�������

import { myData, increment } from "~/composables/myFunction.js"

setup() {
  onMounted(() => increment()); // ��ʼ��
  watch(myData, () => console.log('Data updated!')); // �������ݱ仯
}

�� myData ��ֵ�ı�ʱ������е� watch �ᴥ��������� Composables �� Vue 3 ��ӦʽϵͳЭͬ�����Ļ�����ʽ��

���� Composables

2.1 useFetch

useFetch �� Nuxt 3 �ṩ��һ������ Composables�����ڼ򻯴� API ��ȡ���ݵĹ��̡�����װ���첽���ݻ�ȡ���߼���ʹ��������л�ȡ���ݱ�ü򵥺�ֱ�ۡ�

�����÷�

  1. ���� useFetch ���������� useFetch ��
  2. ʹ�� useFetch ��������� setup �����е��� useFetch ��������һ�� URL ��һ������ URL �ĺ�����

ʾ���������£�

// components/MyComponent.vue
import { useFetch } from '#app'; // ʹ�� Nuxt 3 ������ useFetch

export default {
  setup() {
    const { data, pending, error } = useFetch('/api/data');

    return {
      data,
      pending,
      error
    };
  }
}

����������У� useFetch ��������ȡ /api/data �����ݡ� data ������ API ���ص����ݣ� pending
��һ������ֵ����ʾ�����Ƿ����ڽ����У� error �����κο��ܷ����Ĵ���

�����÷�

useFetch Ҳ֧�ָ��߼����÷��������Զ�������ѡ�������Ӧ�ʹ���ȡ�

  1. �Զ�������ѡ�� �����Դ���һ��������Ϊ�ڶ����������������������������󷽷���ͷ����Ϣ�ȡ�
setup() {
  const { data, pending, error } = useFetch('/api/data', { method: 'POST', headers: { 'Content-Type': 'application/json' } });

  return {
    data,
    pending,
    error
  };
}

  1. ������Ӧ�ʹ��� ���������Ӷ�����߼���������Ӧ���ݻ����
setup() {
  const { data, pending, error } = useFetch('/api/data');

  if (error.value) {
    console.error('Error fetching data:', error.value);
  }

  return {
    data,
    pending,
    error
  };
}

  1. ��̬ URL �����Դ���һ������ URL �ĺ�����ʹ�� URL ���Ը��������״̬��̬�仯��
setup() {
  const url = computed(() => `/api/data?id=${someId.value}`);
  const { data, pending, error } = useFetch(url);

  return {
    data,
    pending,
    error
  };
}

����������У�URL �Ǹ��� someId ��ֵ��̬���ɵġ�

ͨ����Щ�����÷��� useFetch ������Ӧ�����ӵ����ݻ�ȡ����ͬʱ���ִ���������ͼ�ࡣ

2.2 useHead

useHead �� Nuxt 3 �е�һ������ Composable�����ڹ�������� Ԫ���ݣ�����⡢meta
��ǩ��ͼ��ȡ��������ڶ������й���ͷ��Ԫ���ݵĹ��̣�ȷ��������Ӧ���б���һ���Ժ�SEO�Ż���

�����÷�

  1. ���� useHead ���������� useHead ��
  2. ʹ�� useHead ��������� setup �����е��� useHead ������һ�� head �����������������������ӻ��޸�ͷ��Ԫ���ݡ�

ʾ���������£�

// components/MyComponent.vue
import { useHead } from '#app';

export default {
  setup() {
    const head = useHead();

    head.title('My Component Title');
    head.meta({ name: 'description', content: 'This is a description for my component' });

    return {
      head
    };
  }
}

����������У� head.title ����������ı��⣬ head.meta ������һ������Ԫ��ǩ��

�����÷�

  1. ��̬ͷ������ ������Ը��������״̬��̬����ͷ��Ԫ���ݡ�
setup() {
  const title = computed(() => `My Component - ${someValue.value}`);
  const head = useHead();

  head.title(title);

  return {
    title,
    head
  };
}

  1. Ԥ��Ⱦ�Ż� �� useHead �������Ԥ��Ⱦ��SSR��������Ԥ��Ⱦʱ��ͷ��Ԫ���ݣ������SEO�dz���Ҫ��
setup() {
  const head = useHead();

  if (process.server) {
    head.title('My Component Title (Server-side)');
  }

  return {
    head
  };
}

  1. ����Ĭ��ͷ�� �� useHead ���Զ����� Nuxt ��Ĭ��ͷ��������Ը������ǣ���Ҳ����ѡ����Ĭ�ϵġ�
setup() {
  const head = useHead();

  head.meta({ ...head.meta(), name: 'robots', content: 'noindex, nofollow' });

  return {
    head
  };
}

����������У�������һ���µ�Ԫ��ǩ��ͬʱ������Ĭ�ϵ�Ԫ��ǩ��

useHead �ṩ��һ�����ķ�ʽ�����������ͷ��Ԫ���ݣ�ʹ������Ӧ�õ�SEO�Ż���Ԫ����һ���Ա�ü򵥡�

2.3 useRuntimeConfig

useRuntimeConfig �� Nuxt 3 �е�һ������ Composable��������Ӧ�õ�����ʱ��ȡ������Ϣ����ʹ���ڲ�ͬ��������������������ʹ�ò�ͬ�����ñ�ü򵥡�

�����÷�

  1. ���� useRuntimeConfig ���������� useRuntimeConfig ��
  2. ʹ�� useRuntimeConfig ��������� setup �����е��� useRuntimeConfig ������һ�����󣬰�����Ӧ�õ�����ʱ���á�

ʾ���������£�

// components/MyComponent.vue
import { useRuntimeConfig } from '#app';

export default {
  setup() {
    const config = useRuntimeConfig();

    console.log(config.public.apiBase);

    return {
      config
    };
  }
}

����������У� config.public.apiBase ��ȡ��Ӧ�õĹ���������Ϣ�е� apiBase ���ԡ�

�����÷�

  1. ���ֻ��� ������Ը��ݲ�ͬ�Ļ�����������������ʹ�ò�ͬ�����á�
// nuxt.config.ts
export default defineNuxtConfig({
  runtimeConfig: {
    public: {
      apiBase: process.env.NODE_ENV === 'development' ? 'http://localhost:3000/api' : 'https://myapp.com/api'
    }
  }
});

����������У����ݲ�ͬ�Ļ��������˲�ͬ�� apiBase ֵ��

  1. ˽������ ��������� runtimeConfig ������˽�����ã���Щ����ֻ�ڷ������˿��á�
// nuxt.config.ts
export default defineNuxtConfig({
  runtimeConfig: {
    secretKey: 'my-secret-key'
  }
});

// components/MyComponent.vue
import { useRuntimeConfig } from '#app';

export default {
  setup() {
    const config = useRuntimeConfig();

    console.log(config.secretKey);

    return {
      config
    };
  }
}

����������У� config.secretKey ��ȡ��Ӧ�õ�˽��������Ϣ�е� secretKey ���ԡ�

  1. ʹ�� defineNuxtConfig �Զ������� �������ʹ�� defineNuxtConfig �����Զ������ã����� runtimeConfig ��ʹ�����ǡ�
// nuxt.config.ts
export default defineNuxtConfig({
  myCustomConfig: 'my-custom-value',
  runtimeConfig: {
    public: {
      apiBase: process.env.NODE_ENV === 'development' ? 'http://localhost:3000/api' : 'https://myapp.com/api'
    },
    myCustomConfig: {
      type: String,
      default: 'default-value'
    }
  }
});

// components/MyComponent.vue
import { useRuntimeConfig } from '#app';

export default {
  setup() {
    const config = useRuntimeConfig();

    console.log(config.myCustomConfig);

    return {
      config
    };
  }
}

����������У�ʹ�� defineNuxtConfig �Զ�����һ����Ϊ myCustomConfig �����ã����� runtimeConfig ��ʹ��������

useRuntimeConfig �ṩ��һ�ּ򵥡�ǿ��ķ�ʽ����ȡӦ�õ�����ʱ���ã�ͬʱ֧�����ֻ������Զ������á�

2.4 useRequestEvent

2.5 useAppConfig

2.6 useAsyncData

2.7 useCookie

2.8 useError

2.9 useHeadSafe

2.10 useHydration

2.11 useLazyAsyncData

2.12 useLazyFetch

2.13 useNuxtApp

2.14 useNuxtData

2.15 useRequestHeaders

2.16 useRequestURL

2.17 useRoute

2.18 useSeoMeta

2.19 useRouter

2.20 useServerSeoMeta

2.21 useState

��¼

������������������ת�� ���˲���ҳ�� ���� ɨ���ע����΢����һ�ѣ� ������� ǰ����ȫջ������ɳ� ���Ķ����������£� ����̽�� Nuxt3 Composables������Ŀ¼�ܹ�������API�ĸ�ЧӦ�� | cmdragon's Blog

�������¹鵵��

  • ���� Nuxt 3 �е�״̬������ʵ��ָ�� | cmdragon's Blog
  • Nuxt 3 ·��ϵͳ��⣺������ʵ��ָ�� | cmdragon's Blog
  • Nuxt 3������������ | cmdragon's Blog
  • Nuxt3ҳ�濪��ʵս̽�� | cmdragon's Blog
  • Nuxt.js ����dz����Ŀ¼�ṹ���ļ���֯��� | cmdragon's Blog
  • ��װ Nuxt.js �IJ����ע������ | cmdragon's Blog
  • ̽��Web Components | cmdragon's Blog
  • Vue΢ǰ�˼ܹ���Qiankunʵ������ָ�� | cmdragon's Blog
  • Vue 3���̽�����Զ�����Ⱦ����������Ⱦ | cmdragon's Blog
  • Tailwind CSS ��Ӧʽ���ʵսָ�� | cmdragon's Blog
С���Ƽ��Ķ�

�������������Ľ�Ϊ������Ϣ����������������ͬ���޹۵��֤ʵ��������

t3 1.24.823769
t3 1.24.823769
���ͣ��������������Ӫ״̬����ʽ��Ӫ�������ԣ����� ����

��Ϸ����

��Ϸ���

��Ϸ��Ƶ

��Ϸ����

��Ϸ�

T3��׿����һ�����ࡢ�����ֵ�3V3��Ӣ�������Ϸ����Ϸ����Ҵ���һ������δ���Ƽ��е�ս������ҿ���

�����Ƶ����

����

ͬ������

����

ɨ��ά�����������ֻ��汾��

ɨ��ά����������΢�Ź��ںţ�

��վ�������������������ϴ��������ַ���İ�Ȩ���뷢�ʼ�[email protected]

��ICP��2022002427��-10 �湫��������43070202000427��© 2013~2025 haote.com ������