解決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加scoped后就無(wú)法修改vant的UI組件的樣式問(wèn)題
這篇文章主要介紹了解決vue加scoped后就無(wú)法修改vant的UI組件的樣式問(wèn)題,具有很好的參考價(jià)值,希望對(duì)大家有所幫助。一起跟隨小編過(guò)來(lái)看看吧2020-09-09vue-cli 項(xiàng)目打包完成后運(yùn)行文件路徑報(bào)錯(cuò)問(wèn)題
這篇文章主要介紹了vue-cli 項(xiàng)目打包完成后運(yùn)行文件路徑報(bào)錯(cuò)問(wèn)題,文中通過(guò)示例代碼介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧2019-07-07Vue模擬響應(yīng)式原理底層代碼實(shí)現(xiàn)的示例
最近去面試的人都會(huì)有這個(gè)體會(huì),去年面試官只問(wèn)我怎么用vue,今年開(kāi)始問(wèn)我vue響應(yīng)式原理,本文就詳細(xì)的介紹一下2021-08-08Vue常見(jiàn)組件間通信方案及典型應(yīng)用場(chǎng)景詳解
這篇文章主要為大家介紹了Vue常見(jiàn)組件間通信方案及典型應(yīng)用場(chǎng)景詳解,有需要的朋友可以借鑒參考下,希望能夠有所幫助,祝大家多多進(jìn)步,早日升職加薪2022-09-09vue3+vite 動(dòng)態(tài)引用靜態(tài)資源及動(dòng)態(tài)引入assets文件夾圖片的多種方式
通過(guò)require動(dòng)態(tài)引入, 發(fā)現(xiàn)報(bào)錯(cuò):require is not defind,這是因?yàn)?nbsp;require 是屬于 Webpack 的方法,本文給大家介紹vue3+vite 動(dòng)態(tài)引用靜態(tài)資源及動(dòng)態(tài)引入assets文件夾圖片的多種方式,感興趣的朋友一起看看吧2023-10-10VUE如何實(shí)現(xiàn)點(diǎn)擊文字添加顏色(動(dòng)態(tài)修改class)
這篇文章主要介紹了VUE如何實(shí)現(xiàn)點(diǎn)擊文字添加顏色(動(dòng)態(tài)修改class),具有很好的參考價(jià)值,希望對(duì)大家有所幫助,如有錯(cuò)誤或未考慮完全的地方,望不吝賜教2023-11-11vue 防止頁(yè)面加載時(shí)看到花括號(hào)的解決操作
這篇文章主要介紹了vue 防止頁(yè)面加載時(shí)看到花括號(hào)的解決操作,具有很好的參考價(jià)值,希望對(duì)大家有所幫助。一起跟隨小編過(guò)來(lái)看看吧2020-11-11Vue3如何利用xlsx、xlsx-js-style導(dǎo)出Excel表格使用(適合新手)
在Vue項(xiàng)目中導(dǎo)出Excel表格是常見(jiàn)的功能,特別是在后臺(tái)管理系統(tǒng)中,為了方便用戶將大量數(shù)據(jù)保存為本地文件,這篇文章主要給大家介紹了關(guān)于Vue3如何利用xlsx、xlsx-js-style導(dǎo)出Excel表格使用的相關(guān)資料,需要的朋友可以參考下2024-06-06vue中el-checkbox、el-switch綁定值問(wèn)題詳解
這篇文章主要給大家介紹了關(guān)于vue中el-checkbox、el-switch綁定值問(wèn)題的相關(guān)資料,文中通過(guò)代碼介紹的非常詳細(xì),對(duì)大家學(xué)習(xí)或者使用vue具有一定的參考借鑒價(jià)值,需要的朋友可以參考下2024-01-01