解决Vue中的生命周期beforeDestory不触发的问题


Posted in Javascript onJuly 21, 2020

分享一句很有用的经验:

给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里面打印 console.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中的生命周期beforeDestory不触发的问题就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
Js基础学习资料
Nov 23 Javascript
使用jQuery解决IE与FireFox下createElement方法的差异
Nov 14 Javascript
js+HTML5实现视频截图的方法
Jun 16 Javascript
JS实现双击屏幕滚动效果代码
Oct 28 Javascript
Jquery1.9.1源码分析系列(十五)动画处理之外篇
Dec 04 Javascript
走进javascript——不起眼的基础,值和分号
Feb 24 Javascript
node.js 中间件express-session使用详解
May 20 Javascript
Vue实例中生命周期created和mounted的区别详解
Aug 25 Javascript
vue.js语法及常用指令
Oct 29 Javascript
vue中路由参数传递可能会遇到的坑
Dec 07 Javascript
Angular6 Filter实现页面搜索的示例代码
Dec 02 Javascript
p5.js实现动态图形临摹
Oct 23 Javascript
详解微信小程序入门从这里出发(登录注册、开发工具、文件及结构介绍)
Jul 21 #Javascript
vue 清空input标签 中file的值操作
Jul 21 #Javascript
Vue-resource安装过程及使用方法解析
Jul 21 #Javascript
vue中destroyed方法的使用说明
Jul 21 #Javascript
解决vue组件销毁之后计时器继续执行的问题
Jul 21 #Javascript
vue 实现setInterval 创建和销毁实例
Jul 21 #Javascript
解决vue.js中settimeout遇到的问题(时间参数短效果不稳定)
Jul 21 #Javascript
You might like
使用无限生命期Session的方法
2006/10/09 PHP
PHP获取中英混合字符串长度的方法
2014/06/07 PHP
PHP验证码类ValidateCode解析
2017/01/07 PHP
Smarty模板类内部原理实例分析
2019/07/03 PHP
MooBox 基于Mootools的对话框插件
2012/01/20 Javascript
javascript中parentNode,childNodes,children的应用详解
2013/12/17 Javascript
jquery动态添加option示例
2013/12/30 Javascript
jquery下div 的resize事件示例代码
2014/03/09 Javascript
jquery中each方法示例和常用选择器
2014/07/08 Javascript
JavaScript实现列表分页功能特效
2015/05/15 Javascript
JavaScript实现LI列表数据绑定的方法
2015/08/04 Javascript
js倒计时简单实现方法
2015/12/17 Javascript
jQuery Dialog对话框事件用法实例分析
2016/05/10 Javascript
Bootstrap复选框和单选按钮美化插件(推荐)
2016/11/23 Javascript
手把手教你写一个微信小程序(推荐)
2018/10/17 Javascript
js纯前端实现腾讯cos文件上传功能的示例代码
2019/05/14 Javascript
vue+element树组件 实现树懒加载的过程详解
2019/10/21 Javascript
vue项目中锚点定位替代方式
2019/11/13 Javascript
[02:03]完美世界DOTA2联赛10月30日赛事集锦
2020/10/31 DOTA
Python中的列表知识点汇总
2015/04/14 Python
Django中使用Celery的教程详解
2018/08/24 Python
python 调用有道api接口的方法
2019/01/03 Python
Python Pandas实现数据分组求平均值并填充nan的示例
2019/07/04 Python
详解Django将秒转换为xx天xx时xx分
2019/09/27 Python
草莓网化妆品澳大利亚站:Strawberrynet AU
2017/12/18 全球购物
蔻驰法国官网:COACH法国
2018/11/14 全球购物
Tommy Hilfiger美国官网:美国高端休闲领导品牌
2019/01/14 全球购物
加拿大服装和鞋类零售商:Mark’s
2021/01/04 全球购物
会计专业应届生自荐信
2014/02/07 职场文书
函授毕业生自我鉴定范文
2014/03/25 职场文书
读书之星事迹材料
2014/05/12 职场文书
优秀员工评优方案
2014/06/13 职场文书
爱国口号
2014/06/19 职场文书
工人先锋号申报材料
2014/12/29 职场文书
小学生暑假生活总结
2015/07/13 职场文书
导游词之唐山景点
2019/12/18 职场文书