解决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 相关文章推荐
将HTML自动转为JS代码
Jun 26 Javascript
基于PHP+Jquery制作的可编辑的表格的代码
Apr 10 Javascript
日期处理的js库(迷你版)--自建js库总结
Nov 21 Javascript
document.forms用法示例介绍
Jun 26 Javascript
javascript比较两个日期相差天数的方法
Jul 23 Javascript
实例代码详解javascript实现窗口抖动及qq窗口抖动
Jan 04 Javascript
jQuery布局组件EasyUI Layout使用方法详解
Feb 28 Javascript
JavaScript寄生组合式继承原理与用法分析
Jan 11 Javascript
关于layui toolbar和template的结合使用方法
Sep 19 Javascript
基于layui table返回的值的多级嵌套的解决方法
Sep 19 Javascript
js实现九宫格布局效果
May 28 Javascript
解决Vue中使用keepAlive不缓存问题
Aug 04 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脚本的10个技巧(6)
2006/10/09 PHP
Netbeans 8.2与PHP相关的新特性介绍
2016/10/08 PHP
php mysql_list_dbs()函数用法示例
2017/03/29 PHP
PHP的new static和new self的区别与使用
2019/11/27 PHP
nicejforms——美化表单不用愁
2007/02/20 Javascript
input、button的不同type值在ajax提交表单时导致的陷阱
2009/02/24 Javascript
jQuery移动端日期(datedropper)和时间(timedropper)选择器附源码下载
2016/04/19 Javascript
JS两个数组比较,删除重复值的巧妙方法(推荐)
2016/06/03 Javascript
JavaScript程序中实现继承特性的方式总结
2016/06/24 Javascript
jQuery遍历DOM的父级元素、子级元素和同级元素的方法总结
2016/07/07 Javascript
js鼠标跟随运动效果
2017/03/11 Javascript
解决vue组件props传值对象获取不到的问题
2019/06/06 Javascript
js+css3实现简单时钟特效
2020/09/13 Javascript
鸿蒙系统中的 JS 开发框架
2020/09/18 Javascript
python通过openpyxl生成Excel文件的方法
2015/05/12 Python
Python用模块pytz来转换时区
2016/08/19 Python
python类的继承实例详解
2017/03/30 Python
Python输出带颜色的字符串实例
2017/10/10 Python
java中两个byte数组实现合并的示例
2018/05/09 Python
三步解决python PermissionError: [WinError 5]拒绝访问的情况
2020/04/22 Python
详解Django中异步任务之django-celery
2020/11/05 Python
html5拖曳操作 HTML5实现网页元素的拖放操作
2013/01/02 HTML / CSS
Net-A-Porter美国官网:全球时尚奢侈品名站
2017/02/11 全球购物
欧洲著名的珠宝和手表网上商城:uhrcenter
2017/04/10 全球购物
Nike瑞典官方网站:Nike.com (SE)
2018/11/26 全球购物
纽约州一群才华横溢的金匠制作而成:Hearth Jewelry
2019/03/22 全球购物
银行求职信个人范文
2013/12/16 职场文书
小学一年级评语大全
2014/04/22 职场文书
学生实习证明范文
2014/09/28 职场文书
企业工会工作总结2015
2015/05/13 职场文书
小型婚礼主持词
2015/06/30 职场文书
新兵入伍决心书
2015/09/22 职场文书
2016高考寄语集锦
2015/12/04 职场文书
自愿离婚协议书范本2016
2016/03/18 职场文书
redis配置文件中常用配置详解
2021/04/14 Redis
oracle重置序列从0开始递增1
2022/02/28 Oracle