Nuxt.js 插件运用

发布时间：2023-04-14 13:11:20 所属栏目：教程来源：

导读：Nuxt.js允许您在运行Vue.js应用程序之前执行js插件。这在您需要使用自己的库或第三方模块时特别有用。

需要注意的是，在任何 Vue 组件的生命周期内，只有 beforeCreate 和 created 这两个方法会在客户端和服务端

Nuxt.js允许您在运行Vue.js应用程序之前执行js插件。这在您需要使用自己的库或第三方模块时特别有用。

需要注意的是，在任何 Vue 组件的生命周期内，只有 beforeCreate 和 created 这两个方法会在客户端和服务端被调用。其他生命周期函数仅在客户端被调用。

使用第三方模块
我们可以在应用中使用第三方模块，一个典型的例子是在客户端和服务端使用 axios 做 HTTP 请求。

首先我们需要安装 npm 包：

npm install --save axios
然后，在页面内这样使用：

<template>
<h1>{{ title }}</h1>
</template>

<script>
import axios from 'axios'

export default {
async asyncData ({ params }) {
let { data } = await axios.get(`https://my-api/posts/${params.id}`)
return { title: data.title }
}
}
</script>
使用 Vue 插件

假如我们想使用 vue-notifications 显示应用的通知信息，我们需要在程序运行前配置好这个插件。

首先增加文件 plugins/vue-notifications.js：

import Vue from 'vue'
import VueNotifications from 'vue-notifications'

Vue.use(VueNotifications)
然后, 在 nuxt.config.js 内配置 plugins 如下：

module.exports = {
plugins: ['~/plugins/vue-notifications']
}
想了解更多关于 plugins 的配置，请参考插件 API 文档。

如果插件位于node_modules并导出模块，需要将其添加到transpile构建选项：

module.exports = {
build: {
transpile: ['vue-notifications']
}
}
您可以参考构建配置文档来获取更多构建选项。

注入 $root 和 context
有时您希望在整个应用程序中使用某个函数或属性值，此时，你需要将它们注入到Vue实例（客户端），context（服务器端）甚至 store(Vuex)。按照惯例，新增的属性或方法名使用$作为前缀。

注入 Vue 实例

将内容注入Vue实例，避免重复引入，在Vue原型上挂载注入一个函数，所有组件内都可以访问(不包含服务器端)。

plugins/vue-inject.js:

import Vue from 'vue'

Vue.prototype.$myInjectedFunction = string => console.log('This is an example', string)
nuxt.config.js:

export default {
plugins: ['~/plugins/vue-inject.js']
}
这样，您就可以在所有Vue组件中使用该函数。

example-component.vue:

export default {
mounted () {
this.$myInjectedFunction('test')
}
}
注入 context
context注入方式和在其它vue应用程序中注入类似。

plugins/ctx-inject.js:

export default ({ app }, inject) => {
// Set the function directly on the context.app object
app.myInjectedFunction = string => console.log('Okay, another function', string)
}
nuxt.config.js:

export default {
plugins: ['~/plugins/ctx-inject.js']
}
现在，只要您获得context，你就可以使用该函数（例如在asyncData和fetch中）。 ctx-example-component.vue:

export default {
asyncData (context) {
context.app.myInjectedFunction('ctx!')
}
}
同时注入

如果您需要同时在context，Vue实例，甚至Vuex中同时注入，您可以使用inject方法,它是plugin导出函数的第二个参数。将内容注入Vue实例的方式与在Vue应用程序中进行注入类似。系统会自动将$添加到方法名的前面。

plugins/combined-inject.js:

export default ({ app }, inject) => {
inject('myInjectedFunction', string => console.log('That was easy!', string))
}
nuxt.config.js:

export default {
plugins: ['~/plugins/combined-inject.js']
}
现在您就可以在context，或者Vue实例中的this，或者Vuex的actions/mutations方法中的this来调用myInjectedFunction方法。 ctx-example-component.vue:

export default {
mounted () {
this.$myInjectedFunction('works in mounted')
},
asyncData (context) {
context.app.$myInjectedFunction('works with context')
}
}
store/index.js:

export const state = () => ({
someValue: ''
})

export const mutations = {
changeSomeValue (state, newValue) {
this.$myInjectedFunction('accessible in mutations')
state.someValue = newValue
}
}

export const actions = {
setSomeValuetoWhatever ({ commit }) {
this.$myInjectedFunction('accessible in actions')
const newValue = 'whatever'
commit('changeSomeValue', newValue)
}
}
只在客户端使用的插件

不支持ssr的系统，插件只在浏览器里使用，这种情况下下，你可以用 ssr: false ，使得插件只会在客户端运行。

（编辑：汽车网）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!