【Nuxt】自定义插件和生命周期

news2024/9/20 0:08:53

自定义插件

在这里插入图片描述

方式一：

app.vue

// 创建插件(在app.vue中创建全局可以使用 而在某个页面中创建只有该页面可以使用)
// 方式一：
const nuxtApp = useNuxtApp();
nuxtApp.provide("formDate", () => {
  return "2023-12-12";
})
nuxtApp.provide("version", "1.0.0");
console.log(nuxtApp.$formDate(), nuxtApp.$version, nuxtApp.$formatPrice(100.1234))

方式二：

~/plugins/price.ts：

// vue 实例创建的时候 插件会被注册
export default defineNuxtPlugin((nuxtApp) => {
    return {
        provide: {
            formatPrice: (price: number) => {
                return price.toFixed(2)
            }
        }
    }
})

如果只是允许客户端使用，则需要命名为 prive.client.ts ，然后使用：
if (process.client) {
 console.log(nuxtApp.$formatPrice(100.1234))
}

插件注册顺序文件加数字来确定，比如：1.prive.ts 。

生命周期

App 生命周期

hooks

~/plugins/lifecycle.ts

export default defineNuxtPlugin((nuxtApp) => {
    // 生命周期
    nuxtApp.hook('app:rendered', () => {
        console.log('app:rendered')
    })
    nuxtApp.hook('app:created', () => {
        console.log('app:created')
    })
    nuxtApp.hook('app:mounted', () => {
        console.log('app:mounted')
    })
    nuxtApp.hook('app:error', () => {
        console.log('app:error')
    })
})

或者在 app.vue 中使用也是同样的道理。

const nuxtApp = useNuxtApp();
nuxtApp.hook('app:rendered', () => {
  console.log('app:rendered')
})
nuxtApp.hook('app:created', () => {
  console.log('app:created')
})
nuxtApp.hook('app:mounted', () => {
  console.log('app:mounted')
})
nuxtApp.hook('app:error', () => {
  console.log('app:error')
})