Question

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

要发布通知，我正在使用vue-notification，只需调用$notify，我就可以在任何地方发布通知。除了我的$fetch插件中。在插件中提取的回调函数内部，当我像Vue.prototype.$notify这样使用它时，调用确实起作用。但是直接在函数内部却没有。在这里查看我的评论代码：

let fetchPlugin = {}
fetchPlugin.install = function(Vue, options){
    Vue.prototype.$fetch = {

        get(url, processingFunction, show_loading=false, extra_options={}){
            if(show_loading){

                // This call does not work
                Vue.prototype.$notify({
                    group: 'loading',
                    title: 'Loading...',
                    type: 'success'
                })
            }

            let default_options = {
                credentials: 'same-origin',
            }
            options = Object.assign(default_options, extra_options)
            fetch(url, options)
                .then(function(response){
                    if(show_loading){

                        // This call works
                        Vue.prototype.$notify({
                            group: 'loading',
                            clean: true
                        })
                    }
                    if(!response.ok){ throw response }
                    return response.json()
                })
                .then(processingFunction)
                .catch(err => {
                    console.log(err)

                    // This call also works
                    Vue.prototype.$notify({
                        group: 'fetch',
                        title: 'An error occurred',
                        type: 'error'
                    })
                })    
        }
    }
}
export default fetchPlugin

在main.js之前，我正在导入vue-notification并在其中使用fetchPlugin，所以我认为自己可以访问$notify添加的vue-notification函数。由于在设置期间没有Vue实例可供参考：

Vue.use(Notification)
Vue.use(fetchPlugin)

但是显然，这并不像我预期的那样有效。为什么访问$notify在.then函数内部而不在它们外部起作用？如何获取加载通知？

更新：我已经用console.log(Vue.prototype)验证了$notify既存在于提取回调函数中，又存在于插件的get函数的开头。否则，它当然也会在我面前丢下一些例外。那么问题是，如果正确调用该函数并且没有异常发生，为什么没有通知会弹出？

Answer 1

我在Github的维护人员的帮助下设法解决了这个问题：-）

我这样做是为了让另一个呼叫发出通知，但是只有当我按下按钮时，通知才起作用。因此，我查看了何时进行第一个调用，该调用位于根元素的创建的生命周期挂钩中。当然，通知元素在该时间点不存在。我将该函数更改为在已安装的生命周期挂钩上调用，然后一切正常。

https://github.com/euvl/vue-notification/issues/92

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

1 个答案: