解决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特效 鼠标移动背景云变化
Dec 28 Javascript
js结合正则实现国内手机号段校验
Jun 19 Javascript
jquery实现表单验证并阻止非法提交
Jul 09 Javascript
基于WebUploader的文件上传js插件
Aug 19 Javascript
jquery实现转盘抽奖功能
Jan 06 Javascript
bootstrap模态框关闭后清除模态框的数据方法
Aug 10 Javascript
JS封装的模仿qq右下角消息弹窗功能示例
Aug 22 Javascript
微信小程序实现保存图片到相册功能
Nov 30 Javascript
JavaScript常见事件处理程序实例总结
Jan 05 Javascript
javascript合并两个数组最简单的实现方法
Sep 14 Javascript
vue打开子组件弹窗都刷新功能的实现
Sep 21 Javascript
antd中table展开行默认展示,且不需要前边的加号操作
Nov 02 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数组函数序列之ksort()对数组的元素键名进行升序排序,保持索引关系
2011/11/02 PHP
php读取csv文件后,uft8 bom导致在页面上显示出现问题的解决方法
2013/08/10 PHP
MAC下通过改apache配置文件切换php多版本的方法
2017/04/26 PHP
ThinkPHP实现登录退出功能
2017/06/29 PHP
PHP序列化和反序列化深度剖析实例讲解
2020/12/29 PHP
javascript学习基础笔记之DOM对象操作
2011/11/03 Javascript
select、radio表单回显功能实现避免使用jquery载入赋值
2013/06/08 Javascript
JS保存、读取、换行、转Json报错处理方法
2013/06/14 Javascript
Jquery和angularjs获取check框选中的值的方法汇总
2016/01/17 Javascript
JavaScript设计模式开发中组合模式的使用教程
2016/05/18 Javascript
AngularJS  自定义指令详解及实例代码
2016/09/14 Javascript
js canvas仿支付宝芝麻信用分仪表盘
2016/11/16 Javascript
jQuery实现根据生日计算年龄 星座 生肖
2016/11/23 Javascript
原生js验证简洁注册登录页面
2016/12/17 Javascript
原生js实现秒表计时器功能
2017/02/16 Javascript
jQuery实现的弹幕效果完整实例
2017/09/06 jQuery
详解在vue-cli项目中使用mockjs(请求数据删除数据)
2017/10/23 Javascript
p5.js入门教程之图片加载
2018/03/20 Javascript
详解使用jQuery.i18n.properties实现js国际化
2018/05/04 jQuery
JavaScript ECMA-262-3 深入解析(二):变量对象实例详解
2020/04/25 Javascript
three.js 将图片马赛克化的示例代码
2020/07/31 Javascript
python实现的守护进程(Daemon)用法实例
2015/06/02 Python
python中argparse模块用法实例详解
2015/06/03 Python
Python利用IPython提高开发效率
2016/08/10 Python
python+selenium开发环境搭建图文教程
2017/08/11 Python
Python使用指定字符长度切分数据示例
2019/12/05 Python
面向新手解析python Beautiful Soup基本用法
2020/07/11 Python
Django日志及中间件模块应用案例
2020/09/10 Python
python中K-means算法基础知识点
2021/01/25 Python
CSS3 文字动画效果
2020/11/12 HTML / CSS
html5使用canvas实现跟随光标跳动的火焰效果
2014/01/07 HTML / CSS
比利时家具购买网站:Home24
2019/01/03 全球购物
机电专业大学生职业规划书范文
2014/02/25 职场文书
小学生作文评语
2014/04/18 职场文书
病人家属写给医院的感谢信
2015/01/23 职场文书
分享MySQL常用 内核 Debug 几种常见方法
2022/03/17 MySQL