Vue의 라이프 사이클 beforeDestory가 트리거되지 않는 문제 해결

유용한 경험을 공유합니다.
router-view에keep-alive를 추가하여 구성 요소 캐시를 만들었기 때문에beforeDestory와destoryed를 터치하지 않습니다
끝!
보충 지식: vuex actions가 vue-resource를 정확하게 사용하는 방식(Error in mounted hook: "TypeError: Cannot read property'get'of u)
장면
. SPA에서 vuex를 사용하여 데이터를 초기화합니다. vuex의 actions에서 vue-resource를 사용해야 합니다.
사용하는 방식은

actions : {
 setTaskList : function (store) {
  let url = 'http://zhihu.carsonlius_liu.cn/api/tasks';
  Vue.$http.get(url).then(function (response) {
   if (response.status === 200) {
    store.commit('setTask', response.body);
   }
  });
 }
}
오류 알림
Error in mounted hook: "TypeError: Cannot read property 'get' of undefined
분석
. 프롬프트 Vue.$http.get은 존재하지 않습니다.인쇄한 후에 역시 존재하지 않기 때문에 문제는 바로 Vue입니다.위쪽
. actions에서 콘솔을 인쇄합니다.log(Vue);
`warn('Vue is a constructor and should be called with the `new` keyword');`
. 그래서 Vue를 실례화한 변수를 $http로 호출합니다.
해결하다
. Vue 실열의 상수를 설명하고 이 상수에 따라 $http를 호출합니다.

const Http = new Vue
actions : {
  setTaskList : function (store) {
   let url = 'http://zhihu.carsonlius_liu.cn/api/tasks';
   Http.$http.get(url).then(function (response) {
    if (response.status === 200) {
     store.commit('setTask', response.body);
    }
   });
  }
}
이상의 이번 Vue의 생명주기 before Destory가 촉발하지 않는 문제를 해결하는 것은 바로 편집자가 여러분에게 공유한 모든 내용입니다. 참고 부탁드리고 저희도 많이 사랑해 주세요.

좋은 웹페이지 즐겨찾기