解決Vue中的生命周期beforeDestory不觸發(fā)的問(wèn)題
分享一句很有用的經(jīng)驗(yàn)：
給router-view加了個(gè)keep-alive導(dǎo)致組件緩存了，所以不會(huì)觸發(fā)beforeDestory和destoryed
結(jié)束！
補(bǔ)充知識(shí)：vuex actions正確使用vue-resource的方式( Error in mounted hook: "TypeError: Cannot read property 'get' of u)
場(chǎng)景
. SPA中 使用vuex初始化一項(xiàng)數(shù)據(jù),在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);
}
});
}
}
報(bào)錯(cuò)提示
Error in mounted hook: "TypeError: Cannot read property 'get' of undefined
分析
. 提示Vue.$http.get 是不存在；打印之后果然不存在， 所以問(wèn)題就是Vue.上面了
. 在actions里面打印 console.log(Vue);
`warn('Vue is a constructor and should be called with the `new` keyword');`
. 所以嘗試實(shí)例化Vue后的變量調(diào)用 $http
解決
. 聲明Vue實(shí)列的常量 并且依靠這個(gè)常量調(diào)用$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中的生命周期beforeDestory不觸發(fā)的問(wèn)題就是小編分享給大家的全部?jī)?nèi)容了，希望能給大家一個(gè)參考，也希望大家多多支持腳本之家。
相關(guān)文章
Vue中實(shí)現(xiàn)權(quán)限控制的方法示例
這篇文章主要介紹了Vue中實(shí)現(xiàn)權(quán)限控制的方法示例，小編覺(jué)得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧2019-06-06
vue.js 中使用（...）運(yùn)算符報(bào)錯(cuò)的解決方法
這篇文章主要介紹了vue.js 中使用（...）運(yùn)算符報(bào)錯(cuò)的解決方法，小編覺(jué)得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧2018-08-08
這篇文章主要介紹了vue prop傳值類(lèi)型檢驗(yàn)方式，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過(guò)來(lái)看看吧2020-07-07
VUE是通過(guò)傳遞一些配置給Vue對(duì)象和頁(yè)面中引用插值表達(dá)式來(lái)操作DOM的,下面這篇文章主要給大家介紹了關(guān)于Vue3中操作dom的四種方式總結(jié),文中通過(guò)實(shí)例代碼介紹的非常詳細(xì),需要的朋友可以參考下2022-12-12
這篇文章主要介紹了Vue之事件處理的相關(guān)資料，文中示例代碼非常詳細(xì)，幫助大家更好的理解和學(xué)習(xí)，感興趣的朋友可以了解下。2020-07-07
不同于vue2不需要被use使用,vue3的機(jī)制是你的指令必須要被注冊(cè)成方法的,這樣你才能全局使用到自定義指令,下面這篇文章主要給大家介紹了關(guān)于vue3自定義指令的相關(guān)資料,需要的朋友可以參考下2022-11-11
vue項(xiàng)目history模式下部署子路由跳轉(zhuǎn)失敗的解決
這篇文章主要介紹了vue項(xiàng)目history模式下部署子路由跳轉(zhuǎn)失敗的解決方案，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2022-03-03
vue子路由跳轉(zhuǎn)實(shí)現(xiàn)tab選項(xiàng)卡
這篇文章主要為大家詳細(xì)介紹了vue子路由跳轉(zhuǎn)實(shí)現(xiàn)tab選項(xiàng)卡，完成一個(gè)簡(jiǎn)單的tab選項(xiàng)卡布局，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2019-07-07
這篇文章主要介紹了vue路由傳參 router-link和編程式傳參方式，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2023-05-05
這篇文章主要介紹了vue3.0實(shí)現(xiàn)插件封裝的方法，幫助大家更好的理解和使用vue框架，感興趣的朋友可以了解下2020-12-12