����λ�ã���ҳ > �����̳� > �̳� > ����̽�� Nuxt3 Composables������Ŀ¼�ܹ�������API�ĸ�ЧӦ��
ժҪ������������̽����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:
������� ǰ����ȫջ������ɳ�
Composables �� Vue 3 �е�һ�������ԣ������������֮�乲���ɸ��õ��߼��ͼ��㡣Composables ���������ģ����Dz�����������������Ƕ�����
JavaScript �ļ���ͨ��λ��
~/composables
Ŀ¼�¡����ǿ��԰������ݡ��������������Եȣ����Ա��κ�������벢ʹ�ã��Ӷ�������֯���룬�����ظ�������ߴ���Ŀɸ����ԡ�
�� 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();
// ...
}
}
~/composables
�ļ����У�����һ���ļ�����
myFunction.js
����������ĺ���������߼���
setup
�����У�������Ҫ�� Composables��
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 ��ӦʽϵͳÐͬ�����Ļ�����ʽ��
useFetch
�� Nuxt 3 �ṩ��һ������ Composables�����ڼ򻯴� API ��ȡ���ݵĹ��̡�����װ���첽���ݻ�ȡ���߼���ʹ��������л�ȡ���ݱ�ü򵥺�ֱ�ۡ�
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
Ҳ֧�ָ��߼����÷��������Զ�������ѡ�������Ӧ�ʹ���ȡ�
setup() {
const { data, pending, error } = useFetch('/api/data', { method: 'POST', headers: { 'Content-Type': 'application/json' } });
return {
data,
pending,
error
};
}
setup() {
const { data, pending, error } = useFetch('/api/data');
if (error.value) {
console.error('Error fetching data:', error.value);
}
return {
data,
pending,
error
};
}
setup() {
const url = computed(() => `/api/data?id=${someId.value}`);
const { data, pending, error } = useFetch(url);
return {
data,
pending,
error
};
}
����������У�URL �Ǹ���
someId
��ֵ��̬���ɵġ�
ͨ����Щ�����÷���
useFetch
������Ӧ�����ӵ����ݻ�ȡ����ͬʱ���ִ���������ͼ�ࡣ
useHead
�� Nuxt 3 �е�һ������ Composable�����ڹ��������
Ԫ���ݣ�����⡢meta
��ǩ��ͼ��ȡ��������ڶ������й���ͷ��Ԫ���ݵĹ��̣�ȷ��������Ӧ���б���һ���Ժ�SEO�Ż���
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
������һ������Ԫ��ǩ��
setup() {
const title = computed(() => `My Component - ${someValue.value}`);
const head = useHead();
head.title(title);
return {
title,
head
};
}
useHead
�������Ԥ��Ⱦ��SSR��������Ԥ��Ⱦʱ��ͷ��Ԫ���ݣ������SEO�dz���Ҫ��
setup() {
const head = useHead();
if (process.server) {
head.title('My Component Title (Server-side)');
}
return {
head
};
}
useHead
���Զ����� Nuxt ��Ĭ��ͷ��������Ը������ǣ���Ҳ����ѡ����Ĭ�ϵġ�
setup() {
const head = useHead();
head.meta({ ...head.meta(), name: 'robots', content: 'noindex, nofollow' });
return {
head
};
}
����������У�������һ���µ�Ԫ��ǩ��ͬʱ������Ĭ�ϵ�Ԫ��ǩ��
useHead
�ṩ��һ�����ķ�ʽ�����������ͷ��Ԫ���ݣ�ʹ������Ӧ�õ�SEO�Ż���Ԫ����һ���Ա�ü򵥡�
useRuntimeConfig
�� Nuxt 3 �е�һ������ Composable��������Ӧ�õ�����ʱ��ȡ������Ϣ����ʹ���ڲ�ͬ��������������������ʹ�ò�ͬ�����ñ�ü򵥡�
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
���ԡ�
// nuxt.config.ts
export default defineNuxtConfig({
runtimeConfig: {
public: {
apiBase: process.env.NODE_ENV === 'development' ? 'http://localhost:3000/api' : 'https://myapp.com/api'
}
}
});
����������У����ݲ�ͬ�Ļ��������˲�ͬ��
apiBase
ֵ��
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
���ԡ�
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
�ṩ��һ�ּ򵥡�ǿ��ķ�ʽ����ȡӦ�õ�����ʱ���ã�ͬʱ֧�����ֻ������Զ������á�
������������������ת�� ���˲���ҳ�� ���� ɨ���ע����΢����һ�ѣ�
������� ǰ����ȫջ������ɳ�
���Ķ����������£�
����̽�� Nuxt3 Composables������Ŀ¼�ܹ�������API�ĸ�ЧӦ�� | cmdragon's Blog
ʹ��Blender���ɳ���ģ��
�Ķ�ȫ����������ERA5�����ط���
�Ķ�Xpath���������﷨
�Ķ�����ѧϰ�������繹�����£�
�Ķ���ΪMateƷ��ʢ�䣺HarmonyOS NEXT�ӳ�����Ϸ���ܵõ�����ͷ�
�Ķ�ʵ�ֶ��󼯺���DataTable���໥ת��
�Ķ�Ӳ�̵Ļ���֪ʶ��ѡ��ָ��
�Ķ�������й��ƶ��ı�ͼ��ײ�
�Ķ�����NEXTԪ�����������ѿ����ϼ���Ʒ
�Ķ��ᳲ���С������������Ƽ��رշ���
�Ķ������ArcMap�����н���դ��ͼ���ز�������
�Ķ��㷨�����ݽṹ 1 - ģ��
�Ķ���Ѷ�����߿ͷ���Ӫ��ϵͳ����
�Ķ���Ѷ��Ƶҹ��ģʽ���ý̳�
�Ķ����ں���NEXT��Ѫ���Ŵ���������������
�Ķ�5. Spring Cloud OpenFeign ����ʽ WebService �ͻ��˵ij���ϸʹ��
�Ķ�Java����ģʽ����̬�����Ͷ�̬�����ĶԱȷ���
�Ķ�Win11�ʼDZ����Զ�����Ӧ�õ���ɫ����ʾ����
�Ķ�˼�� V1.5.6 ��׿��
��ս�귨 V7.5.0 ��׿��
У��������������׵������� V1.0 ��׿��
��˸֮�� V1.9.7 ��׿��
������Ե����� v1.0.4 ��׿��
������֮ŠV5.2.3 ��׿��
��������������Դ V1.0 ��׿��
���֮Ϣ V1.0 ��׿��
��ħ������������䣩 V1.0 ��׿��
���ں�������ϵ�����������������վ�����������������Ƽ�����
Ƶ�� ����Ƶ��������ר������������׿�������app����
�Ƽ� ��Ô���������°��������ܿ������ز���
���� ����ɫ������������ ���������ս������������
ɨ��ά�����������ֻ��汾��
ɨ��ά����������΢�Ź��ںţ�
��վ�������������������ϴ��������ַ���İ�Ȩ���뷢�ʼ�[email protected]
��ICP��2022002427��-10 �湫��������43070202000427��© 2013~2025 haote.com ������