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

自定义插件

方式一：

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')
})

这里会有一个问题，在 vue 文件中 setup 语法糖下 只能执行 setup 之后的钩子，所以建议将生命写到 plugins 中。

组件生命周期

用法和上述一样。

由于服务端只会执行 beforeCreate， created， setup 钩子，所以需要注意不要在他们里面使用副作用函数（比如定时器，否则难以清除），所以需要将含有副作用的函数放在 mounted 中。