解决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 相关文章推荐
合并table相同单元格的jquery插件分享(很精简)
Jun 20 Javascript
html的DOM中document对象forms集合用法实例
Jan 21 Javascript
学习JavaScript设计模式(封装)
Nov 26 Javascript
jQuery Form 表单提交插件之formSerialize,fieldSerialize,fieldValue,resetForm,clearForm,clearFields的应用
Jan 23 Javascript
pc加载更多功能和移动端下拉刷新加载数据
Nov 07 Javascript
JS实现的相册图片左右滚动完整实例
Nov 23 Javascript
angular仿支付宝密码框输入效果
Mar 25 Javascript
angularJS 发起$http.post和$http.get请求的实现方法
May 18 Javascript
Vue2.0实现调用摄像头进行拍照功能 exif.js实现图片上传功能
Apr 28 Javascript
vue项目打包后怎样优雅的解决跨域
May 26 Javascript
uni-app如何实现增量更新功能
Jan 03 Javascript
JavaScript实现左右滚动电影画布
Feb 06 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
用Simple Excel导出xls实现方法
2012/12/06 PHP
php实现跨域提交form表单的方法【2种方法】
2016/10/17 PHP
PHP获取input输入框中的值去数据库比较显示出来
2016/11/16 PHP
jquery ui dialog里调用datepicker的问题
2009/08/06 Javascript
Javascript string 扩展库代码
2010/04/09 Javascript
jQuery取得设置清空select选择的文本与值
2014/07/08 Javascript
JavaScript静态类型检查工具FLOW简介
2015/01/06 Javascript
深入理解JavaScript系列(29):设计模式之装饰者模式详解
2015/03/03 Javascript
JavaScript encodeURI 和encodeURIComponent
2015/12/04 Javascript
Jquery中map函数的用法
2016/06/03 Javascript
JavaScript设计模式之单体模式全面解析
2016/09/09 Javascript
最实用的jQuery分页插件
2016/10/09 Javascript
JavaScript实现数组降维详解
2017/01/05 Javascript
用file标签实现多图文件上传预览
2017/02/14 Javascript
Node.js模拟发起http请求从异步转同步的5种用法
2018/09/26 Javascript
vue项目动态设置页面title及是否缓存页面的问题
2018/11/08 Javascript
react-native滑动吸顶效果的实现过程
2019/06/03 Javascript
JS实现简单省市二级联动
2019/11/27 Javascript
python基础教程之自定义函数介绍
2014/08/29 Python
Python将xml和xsl转换为html的方法
2015/03/10 Python
python数据结构之图深度优先和广度优先实例详解
2015/07/08 Python
python利用Guetzli批量压缩图片
2017/03/23 Python
Python生成一个迭代器的实操方法
2019/06/18 Python
python 求定积分和不定积分示例
2019/11/20 Python
Pytorch 实现权重初始化
2019/12/31 Python
介绍CSS3使用技巧5个
2009/04/02 HTML / CSS
荷兰网上鞋店:Ziengs.nl
2017/01/02 全球购物
FORZIERI福喜利中国官网:奢侈品购物梦工厂
2019/05/03 全球购物
zooplus意大利:在线宠物商店
2019/08/07 全球购物
现代绅士日常奢侈品:Todd Snyder
2019/12/13 全球购物
NET程序员上机面试题
2015/05/23 面试题
为什么需要版本控制
2016/10/28 面试题
物理系毕业生自荐书范文
2014/02/22 职场文书
学生逃课万能检讨书2000字
2015/02/17 职场文书
大学生见习总结报告
2015/06/24 职场文书
MySQL系列之八 MySQL服务器变量
2021/07/02 MySQL