解决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获取html文件的思路及示例
Sep 17 Javascript
js实现的标题栏新消息闪烁提示效果
Jun 06 Javascript
bootstrap table 服务器端分页例子分享
Feb 10 Javascript
Vue.js常用指令之循环使用v-for指令教程
Jun 27 Javascript
angular2中Http请求原理与用法详解
Jan 11 Javascript
详解 vue better-scroll滚动插件排坑
Feb 08 Javascript
JavaScript 五大常见函数
Mar 23 Javascript
angularjs获取到My97DatePicker选中的值方法
Oct 02 Javascript
Node.js 的 GC 机制详解
Jun 03 Javascript
layui关闭弹窗后刷新主页面和当前更改项的例子
Sep 06 Javascript
微信提示 在浏览器打开 效果实现过程解析
Sep 10 Javascript
详解JavaScript 中的批处理和缓存
Nov 19 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生成Gif图片验证码
2013/10/27 PHP
php设置静态内容缓存时间的方法
2014/12/01 PHP
ThinkPHP框架实现的邮箱激活功能示例
2018/06/15 PHP
php中上传文件的的解决方案
2018/09/25 PHP
document.all与WEB标准
2020/05/13 Javascript
超级酷和最实用的jQuery实例收集(20个)
2010/04/21 Javascript
固定背景实现的背景滚动特效示例分享
2013/05/19 Javascript
详解JavaScript函数绑定
2013/08/18 Javascript
jQuery实现图片走马灯效果的原理分析
2016/01/16 Javascript
超漂亮的Bootstrap 富文本编辑器summernote
2016/04/05 Javascript
深入解析桶排序算法及Node.js上JavaScript的代码实现
2016/07/06 Javascript
使用bootstrap-paginator.js 分页来进行ajax 异步分页请求示例
2017/03/09 Javascript
jQuery插件HighCharts实现的2D堆条状图效果示例【附demo源码下载】
2017/03/14 Javascript
es6学习之解构时应该注意的点
2017/08/29 Javascript
EasyUI框架 使用Ajax提交注册信息的实现代码
2017/09/27 Javascript
vue router-link传参以及参数的使用实例
2017/11/10 Javascript
小程序文字跑马灯效果
2018/12/28 Javascript
浅谈Vue的响应式原理
2019/05/30 Javascript
小程序自定义弹框效果
2020/11/16 Javascript
javascript实现电商放大镜效果
2020/11/23 Javascript
Python定时发送消息的脚本:每天跟你女朋友说晚安
2018/10/21 Python
python dict 相同key 合并value的实例
2019/01/21 Python
python 实现12bit灰度图像映射到8bit显示的方法
2019/07/08 Python
python实现kNN算法识别手写体数字的示例代码
2019/08/16 Python
python实现输出一个序列的所有子序列示例
2019/11/18 Python
numpy:找到指定元素的索引示例
2019/11/26 Python
Python 实现一个计时器
2020/07/28 Python
基于html和CSS3制作酷炫的导航栏
2015/09/23 HTML / CSS
PHP如何删除一个Cookie值
2012/11/15 面试题
正隆泰信息技术有限公司上机题
2012/06/14 面试题
司机岗位职责
2013/11/15 职场文书
会计学自荐信
2014/06/03 职场文书
党员群众路线剖析材料
2014/10/08 职场文书
会计实训总结范文
2015/08/03 职场文书
酒店工程部的岗位职责汇总大全
2019/10/23 职场文书
python 如何将两个实数矩阵合并为一个复数矩阵
2021/05/19 Python