useNuxtApp
nuxtApp
是一个运行时的上下文, 可以通过插件(plugins)来扩展它。使用provide方法就可以创建nuxt 插件,指定name,就可以在所有的组合式API和组件中通过name来调用value指定对象。
示例:
pages/index.vue:
<template>
<div>
{{ nuxtApp.$hello("你好啊") }}
</div>
</template>
<script lang="ts" setup>
const nuxtApp = useNuxtApp();
nuxtApp.provide("hello", (msg: String) => `Hello ${msg}!`);
</script>
plugins
插件plugins目录,插件可以全局使用
plugins/index.ts:
export default defineNuxtPlugin(() => {
return {
provide: {
hello: (msg: String) => {
return `hello ${msg}!`;
}
}
};
});
pages/index.ts:
<template>
<div>
{{ $hello("world") }}
</div>
</template>
<script lang="ts" setup>
const { $hello } = useNuxtApp();
</script>