다른 Vue 플러그인의 Vue 플러그인 사용

다른 Vue 플러그인의 Vue 플러그인 사용

나는 프런트엔드의 Vue와 백엔드의 짱고 레스트 프레임워크를 사용하여 내 웹사이트를 다시 만들고 있어.모든 AJAX 통화에 대한 인증/헤더/오류 처리가 동일하므로 공유 파일에 넣어야겠다고 생각했다.그래서 나는 a를 만들었다.fetchPlugin.js그걸 처리하고 내 Vue 인스턴스에 연결해서$fetch.

사용 중인 알림을 게시하려면 다음과 같이 하십시오.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기능을 발휘하다그렇지 않으면 물론 그것은 내 면전에 어떤 예외를 던질 것이다.문제는 기능이 올바르게 호출되고 예외가 발생하지 않는 경우 왜 알림이 팝업되지 않는가 하는 것이다.

기투브 관리인의 도움을 받아 가까스로 알아냈다 :-)

다른 전화에서 알림을 올리도록 했는데 버튼을 눌러야 알림이 작동했다.그래서 나는 내가 처음 전화를 했을 때 그것이 루트 요소의 생성된 라이프사이클 훅에 있는 것을 살펴보았다.물론 그 시점에는 알림 요소가 존재하지 않는다.나는 그 기능을 탑재된 라이프사이클 훅에 호출되도록 변경했고, 그러면 모든 것이 잘 작동한다.

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

참조URL: https://stackoverflow.com/questions/51469733/using-a-vue-plugin-in-another-vue-plugin