解决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实用技巧(一)
Aug 16 Javascript
javascript采用数组实现tab菜单切换效果
Dec 12 Javascript
使用JSLint提高JS代码质量方法分享
Dec 16 Javascript
js数值和和字符串进行转换时可以对不同进制进行操作
Mar 05 Javascript
基于jquery实现一个滚动的分步注册向导-附源码
Aug 26 Javascript
node.js学习之事件模块Events的使用示例
Sep 28 Javascript
微信小程序中实现手指缩放图片的示例代码
Mar 13 Javascript
vue toggle做一个点击切换class(实例讲解)
Mar 13 Javascript
vue实现键盘输入支付密码功能
Aug 18 Javascript
vue-router 手势滑动触发返回功能
Sep 30 Javascript
vue+eslint+vscode配置教程
Aug 09 Javascript
微信小程序上传图片并等比列压缩到指定大小的实例代码
Oct 24 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分页效率终结版(推荐)
2013/07/01 PHP
PHP上传文件时文件过大$_FILES为空的解决方法
2013/11/26 PHP
CI框架安全类Security.php源码分析
2014/11/04 PHP
php redis实现对200w用户的即时推送
2017/03/04 PHP
js实现addClass,removeClass,hasClass的函数代码
2011/07/13 Javascript
AngularJS快速入门
2015/04/02 Javascript
日常收集整理的JavaScript常用函数方法
2015/12/10 Javascript
分享javascript实现的冒泡排序代码并优化
2016/06/05 Javascript
利用JS实现点击按钮后图片自动切换的简单方法
2016/10/24 Javascript
图片上传之FileAPI与NodeJs
2017/01/24 NodeJs
利用ES6语法重构React组件详解
2017/03/02 Javascript
js中setTimeout的妙用--防止循环超时
2017/03/06 Javascript
angularjs中使用ng-bind-html和ng-include的实例
2017/04/28 Javascript
laydate 显示结束时间不小于开始时间的实例
2017/08/11 Javascript
在vue项目中使用sass的配置方法
2018/03/20 Javascript
Vue前端开发规范整理(推荐)
2018/04/23 Javascript
vue裁切预览组件功能的实现步骤
2018/05/04 Javascript
nodejs读取图片返回给浏览器显示
2019/07/25 NodeJs
[05:13]TI4 中国战队 机场出征!!
2014/07/07 DOTA
在Docker上部署Python的Flask框架的教程
2015/04/08 Python
如何在Python函数执行前后增加额外的行为
2016/10/20 Python
Python探索之ModelForm代码详解
2017/10/26 Python
详解python的四种内置数据结构
2019/03/19 Python
Python爬虫:url中带字典列表参数的编码转换方法
2019/08/21 Python
python pptx复制指定页的ppt教程
2020/02/14 Python
Python嵌入C/C++进行开发详解
2020/06/09 Python
keras使用Sequence类调用大规模数据集进行训练的实现
2020/06/22 Python
锐步美国官方网站:Reebok美国
2018/01/10 全球购物
兰蔻英国官网:Lancome英国
2019/04/30 全球购物
爱尔兰电脑、家电和家具购物网站:Buy It Direct
2019/07/09 全球购物
危爆物品安全大检查大整治工作方案
2014/05/03 职场文书
网络营销计划
2015/01/17 职场文书
关爱留守儿童捐款倡议书
2015/04/27 职场文书
保护校园环境倡议书
2015/04/28 职场文书
保护环境建议书作文500字
2015/09/14 职场文书
大学文艺委员竞选稿
2015/11/19 职场文书