解决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 相关文章推荐
IE和Firefox下event事件杂谈
Dec 18 Javascript
Prototype源码浅析 String部分(四)之补充
Jan 16 Javascript
放弃用你的InnerHTML来输出HTML吧 jQuery Tmpl不详细讲解
Apr 20 Javascript
jQuery获取节点和子节点文本的方法
Jul 22 Javascript
JQuery遍历json数组的3种方法
Nov 08 Javascript
jQuery结合CSS制作动态的下拉菜单
Oct 27 Javascript
基于jQuey实现鼠标滑过变色(整行变色)
Dec 07 Javascript
AngularJS实现的获取焦点及失去焦点时的表单验证功能示例
Oct 25 Javascript
js jquery 获取某一元素到浏览器顶端的距离实现方法
Sep 05 jQuery
React注册倒计时功能的实现
Sep 06 Javascript
深入理解vue-class-component源码阅读
Feb 18 Javascript
JS实现瀑布流效果
Mar 07 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
php对csv文件的读取,写入,输出下载操作详解
2013/08/10 PHP
浅谈COOKIE和SESSION区别
2015/07/19 PHP
PHP抓取及分析网页的方法详解
2016/04/26 PHP
Yii2使用表单上传文件的实例代码
2017/08/03 PHP
CI框架(CodeIgniter)实现的导入、导出数据操作示例
2018/05/24 PHP
JavaScript delete 属性的使用
2009/10/08 Javascript
location.href语句与火狐不兼容的问题
2010/07/04 Javascript
JS弹出层单纯的绝对定位居中示例代码
2014/02/18 Javascript
jQuery实现的AJAX简单弹出层效果代码
2015/11/26 Javascript
js实现上传图片预览方法
2016/10/25 Javascript
JavaScript实现按键精灵的原理分析
2017/02/21 Javascript
ES6中Symbol类型用法实例详解
2017/04/06 Javascript
Bootstrap Table从零开始
2017/06/30 Javascript
Vue的Class与Style绑定的方法
2017/09/01 Javascript
JS去掉字符串中所有的逗号
2017/10/18 Javascript
vue自动添加浏览器兼容前后缀操作
2020/08/13 Javascript
Map与WeakMap类型在JavaScript中的使用详解
2020/11/18 Javascript
[00:42]《辉夜杯》—职业组预选赛12月3日15点 正式打响
2015/12/03 DOTA
部署Python的框架下的web app的详细教程
2015/04/30 Python
WINDOWS 同时安装 python2 python3 后 pip 错误的解决方法
2017/03/16 Python
Python错误: SyntaxError: Non-ASCII character解决办法
2017/06/08 Python
python集合比较(交集,并集,差集)方法详解
2018/09/13 Python
对python:print打印时加u的含义详解
2018/12/15 Python
Python实现的爬取豆瓣电影信息功能案例
2019/09/15 Python
ipad上运行python的方法步骤
2019/10/12 Python
python实现大学人员管理系统
2019/10/25 Python
Python 3.8 新功能大揭秘【新手必学】
2020/02/05 Python
python的help函数如何使用
2020/06/11 Python
巴西宠物商店:Cobasi
2019/04/19 全球购物
英国时尚泳装品牌:Maru Swimwear
2019/10/06 全球购物
求∏的近似值,直到最后一项的绝对值小于指定的数
2016/02/12 面试题
房地产销售员的自我评价分享
2013/12/04 职场文书
投资协议书范本
2014/04/21 职场文书
2016年毕业实习心得体会范文
2015/10/09 职场文书
2016年教师党员承诺书范文
2016/03/24 职场文书
Html5调用企业微信的实现
2021/04/16 HTML / CSS