Javascript 在另一个Vue插件中使用Vue插件

Javascript 在另一个Vue插件中使用Vue插件,javascript,vue.js,vuejs2,Javascript,Vue.js,Vuejs2,我正在重建我的网站,前端使用Vue,后端使用Django Rest框架。由于所有AJAX调用的身份验证/头文件/错误处理都是相同的,所以我想我应该将其放在一些共享文件中。因此,我创建了一个处理这个问题的fetchPlugin.js,并将其插入到$fetch下的Vue实例中 要发布通知,我使用的是vue通知,只需调用$notify,我就可以在任何地方发布通知。除了在我的$fetch插件中。在我的插件中的fetches的回调函数中,当我像Vue.prototype.$notify那样使用它时,调用会

我正在重建我的网站,前端使用Vue,后端使用Django Rest框架。由于所有AJAX调用的身份验证/头文件/错误处理都是相同的,所以我想我应该将其放在一些共享文件中。因此,我创建了一个处理这个问题的
fetchPlugin.js
,并将其插入到
$fetch
下的Vue实例中

要发布通知,我使用的是
vue通知
,只需调用
$notify
,我就可以在任何地方发布通知。除了在我的
$fetch
插件中。在我的插件中的fetches的回调函数中,当我像
Vue.prototype.$notify那样使用它时,调用会起作用。但直接在函数内部,它并没有。请参见我的注释代码:

let fetchPlugin={}
fetchPlugin.install=函数(Vue,选项){
Vue.prototype.$fetch={
获取(url,processingFunction,show_load=false,extra_options={}){
如果(显示加载){
//这个电话不起作用
Vue.prototype.$notify({
组:“正在加载”,
标题:“加载…”,
类型:“成功”
})
}
设默认_选项={
凭据:“相同来源”,
}
options=Object.assign(默认选项、额外选项)
获取(url、选项)
.然后(功能(响应){
如果(显示加载){
//这个电话有效
Vue.prototype.$notify({
组:“正在加载”,
干净:是的
})
}
如果(!response.ok){throw response}
返回response.json()
})
.then(处理函数)
.catch(错误=>{
console.log(错误)
//这个电话也有效
Vue.prototype.$notify({
组:“获取”,
标题:“发生错误”,
键入:“错误”
})
})    
}
}
}
导出默认抓取插件
在我的
main.js
中,我在
fetchPlugin
之前导入并使用
vue通知
,因此我想我可以访问添加的
$notify
功能。由于在安装期间,还没有Vue实例可供参考:

Vue.use(通知)
Vue.use(fetchPlugin)
但显然,这并不像我预期的那样有效。为什么访问
$notify
函数内部工作,然后在
函数外部工作而不在其外部工作?如何使加载通知生效



更新:我已经用
console.log(Vue.prototype)
验证了
$notify
在fetch回调函数和插件的
get
函数的开头都存在。否则,它当然也会给我带来一些例外。问题是,如果函数调用正确且没有异常发生,为什么不会弹出通知?

在Github上的维护人员的帮助下,我设法解决了这个问题:-)

我这样做是为了让另一个电话发出通知,但只有当我按下按钮时,通知才起作用。因此,我查看了第一次调用的时间,这是在根元素的创建生命周期挂钩中。当然,此时通知元素不存在。我把这个函数改为在挂载的生命周期挂钩上调用,然后一切都很好