解决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 相关文章推荐
JavaScript的目的分析
Jan 05 Javascript
node.js集成百度UE编辑器
Feb 05 Javascript
JavaScript匿名函数之模仿块级作用域
Dec 12 Javascript
javascript实现网页端解压并查看zip文件
Dec 15 Javascript
JS中的二叉树遍历详解
Mar 18 Javascript
工作中比较实用的JavaScript验证和数据处理的干货(经典)
Aug 03 Javascript
JS前向后瞻正则表达式定义与用法示例
Dec 27 Javascript
详解JavaScript中this的指向问题
Jan 20 Javascript
jquery插件ContextMenu设置右键菜单
Mar 13 Javascript
基于JSONP原理解析(推荐)
Dec 04 Javascript
微信小程序常用简易小函数总结
Feb 01 Javascript
JavaScript实现的3D旋转魔方动画效果实例代码
Jul 31 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生成zip压缩文件的方法详解
2013/06/09 PHP
ThinkPHP分页类使用详解
2014/03/05 PHP
浅析php如何实现App常用的秒发功能
2016/08/03 PHP
PHP实现判断数组是一维、二维或几维的方法
2017/02/06 PHP
PHP实现倒计时功能
2020/11/16 PHP
二级域名转向类
2006/11/09 Javascript
老鱼 浅谈javascript面向对象编程
2010/03/04 Javascript
JavaScript基础教程之alert弹出提示框实例
2014/10/16 Javascript
node.js中的console.timeEnd方法使用说明
2014/12/09 Javascript
JavaScript中的立即执行函数表达式介绍
2015/03/15 Javascript
JS实现淘宝支付宝网站的控制台菜单效果
2015/09/28 Javascript
Bootstrap时间选择器datetimepicker和daterangepicker使用实例解析
2016/09/17 Javascript
jQuery倒计时代码(超简单)
2017/02/27 Javascript
Bootstrap提示框效果的实例代码
2017/07/12 Javascript
Vue 2.0在IE11中打开项目页面空白的问题解决
2017/07/16 Javascript
MUI顶部选项卡的用法(tab-top-webview-main)详解
2017/10/08 Javascript
vue中使用cropperjs的方法
2018/03/01 Javascript
vue配置请求本地json数据的方法
2018/04/11 Javascript
JavaScript插入排序算法原理与实现方法示例
2018/08/06 Javascript
vue自定义指令之面板拖拽的实现
2019/04/14 Javascript
IntelliJ IDEA编辑器配置vue高亮显示
2019/09/26 Javascript
Vue.js 实现地址管理页面思路详解(地址添加、编辑、删除和设置默认地址)
2019/12/11 Javascript
手把手教您实现react异步加载高阶组件
2020/04/07 Javascript
Element InputNumber计数器的使用方法
2020/07/27 Javascript
简单谈谈Python中的闭包
2016/11/30 Python
python 对txt中每行内容进行批量替换的方法
2018/07/11 Python
Html5之title吸顶功能
2018/06/04 HTML / CSS
详解移动端h5页面根据屏幕适配的四种方案
2020/04/15 HTML / CSS
Canvas 文本填充线性渐变的使用详解
2020/06/22 HTML / CSS
德国运动营养和健身网上商店:Myprotein.de
2018/07/18 全球购物
优秀毕业自我鉴定
2014/02/15 职场文书
民警个人对照检查剖析材料
2014/09/17 职场文书
四风对照检查材料范文
2014/09/27 职场文书
大学生党员批评与自我批评范文
2014/10/14 职场文书
教师年终个人总结
2015/02/11 职场文书
党员干部学习十八届五中全会精神心得体会
2016/01/05 职场文书