解决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在JavaScript上的7个不同句法分享
Oct 30 Javascript
JS 屏蔽键盘不可用与鼠标右键不可用的方法
Nov 18 Javascript
Extjs中RowExpander控件的默认展开问题示例探讨
Jan 24 Javascript
js时间比较示例分享(日期比较)
Mar 05 Javascript
使用jQuery制作浮动工具栏的实例分享
May 13 Javascript
解析JavaScript模仿块级作用域
Dec 29 Javascript
ionic实现底部分享功能
May 11 Javascript
vue-router+nginx 非根路径配置方法
Jun 30 Javascript
在小程序中使用canvas的方法示例
Sep 17 Javascript
three.js利用射线Raycaster进行碰撞检测
Mar 12 Javascript
有趣的JavaScript隐式类型转换操作实例分析
May 02 Javascript
javascript实现页面的实时时钟显示示例
Aug 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
php实现的获取网站备案信息查询代码(360)
2013/09/23 PHP
php打印输出棋盘的实现方法
2014/12/23 PHP
php之可变变量的实例详解
2017/09/12 PHP
写出更好的JavaScript程序之undefined篇(中)
2009/11/23 Javascript
SeaJS入门教程系列之完整示例(三)
2014/03/03 Javascript
javascript判断office版本示例
2014/04/11 Javascript
JQuery EasyUI 日期控件如何控制日期选择区间
2014/05/05 Javascript
jQuery使用hide方法隐藏元素自身用法实例
2015/03/30 Javascript
jQuery实现仿百度首页滑动伸缩展开的添加服务效果代码
2015/09/09 Javascript
微信小程序 列表的上拉加载和下拉刷新的实现
2017/04/01 Javascript
vue 动态修改a标签的样式的方法
2018/01/18 Javascript
Vue.js单向绑定和双向绑定实例分析
2018/08/14 Javascript
详解vue移动端项目代码拆分记录
2019/03/15 Javascript
vue+iview动态渲染表格详解
2019/03/19 Javascript
jquery ajax 请求小技巧实例分析
2019/11/11 jQuery
详解Angular Karma测试的持续集成实践
2019/11/15 Javascript
js构造函数constructor和原型prototype原理与用法实例分析
2020/03/02 Javascript
微信小程序实现点击页面出现文字
2020/09/21 Javascript
详解Vue中的watch和computed
2020/11/09 Javascript
[02:32]DOTA2完美大师赛场馆静安体育中心观赛全攻略
2017/11/08 DOTA
[01:14:31]Secret vs VG 2018国际邀请赛淘汰赛BO3 第一场 8.23
2018/08/24 DOTA
linux系统使用python监控apache服务器进程脚本分享
2014/01/15 Python
python入门前的第一课 python怎样入门
2018/03/06 Python
Python队列RabbitMQ 使用方法实例记录
2019/08/05 Python
解决tensorflow打印tensor有省略号的问题
2020/02/04 Python
妇产科护士自我鉴定
2013/10/15 职场文书
超市营业员岗位职责
2013/12/20 职场文书
安全目标管理责任书
2014/07/25 职场文书
居委会个人对照检查材料思想汇报
2014/09/29 职场文书
自主招生专家推荐信
2015/03/26 职场文书
2015年银行大堂经理工作总结
2015/04/24 职场文书
孝女彩金观后感
2015/06/10 职场文书
2015大学生入党个人自传
2015/06/26 职场文书
vue引入Excel表格插件的方法
2021/04/28 Vue.js
解决Golang中goroutine执行速度的问题
2021/05/02 Golang
微信小程序实现聊天室功能
2021/06/14 Javascript