解决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+JQuery返回顶部功能如何实现
Dec 03 Javascript
js操作iframe的一些方法介绍
Jun 25 Javascript
Javascript学习笔记之 对象篇(四) : for in 循环
Jun 24 Javascript
基于jQuery Bar Indicator 插件实现进度条展示效果
Sep 30 Javascript
深入理解Ajax的get和post请求
Jun 02 Javascript
JS实现HTML表格排序功能
Aug 05 Javascript
关于Function中的bind()示例详解
Dec 02 Javascript
纯jQuery实现前端分页功能
Mar 23 jQuery
js 去掉字符串前后空格实现代码集合
Mar 25 Javascript
JS使用插件cryptojs进行加密解密数据实例
May 11 Javascript
浅谈Vue初学之props的驼峰命名
Jul 19 Javascript
Element UI 自定义正则表达式验证方法
Sep 04 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
绿山咖啡和蓝山咖啡
2021/03/04 新手入门
PHP mysqli_free_result()与mysqli_fetch_array()函数详解
2016/09/21 PHP
php文件上传 你真的掌握了吗
2016/11/28 PHP
LNMP部署laravel以及xhprof安装使用教程
2017/09/14 PHP
jQuery的链式调用浅析
2010/12/03 Javascript
用于节点操作的API,颠覆原生操作HTML DOM节点的API
2010/12/11 Javascript
jquery组件使用中遇到的问题整理及解决
2014/02/21 Javascript
Javascript异步编程模型Promise模式详细介绍
2014/05/08 Javascript
jquery实现漂亮的二级下拉菜单代码
2015/08/26 Javascript
js中json处理总结之JSON.parse
2016/10/14 Javascript
浅析script标签中的defer与async属性
2016/11/30 Javascript
js判断节假日实例代码
2017/12/27 Javascript
JavaScript中字符串的常用操作方法及特殊字符
2018/03/18 Javascript
Vue-cli配置打包文件本地使用的教程图解
2018/08/02 Javascript
Vue 菜单栏点击切换单个class(高亮)的方法
2018/08/22 Javascript
微信小程序template模板与component组件的区别和使用详解
2019/05/22 Javascript
webpack是如何实现模块化加载的方法
2019/11/06 Javascript
react使用antd表单赋值,用于修改弹框的操作
2020/10/29 Javascript
[02:12]2015国际邀请赛 SHOWOPEN
2015/08/05 DOTA
[01:44]Ti10举办地公布
2019/08/25 DOTA
Python脚本实现格式化css文件
2015/04/08 Python
Python调用命令行进度条的方法
2015/05/05 Python
Python中的自省(反射)详解
2015/06/02 Python
python验证码识别实例代码
2018/02/03 Python
Pyqt QImage 与 np array 转换方法
2019/06/27 Python
python opencv 批量改变图片的尺寸大小的方法
2019/06/28 Python
Python随机数函数代码实例解析
2020/02/09 Python
解决python cv2.imread 读取中文路径的图片返回为None的问题
2020/06/02 Python
python的flask框架难学吗
2020/07/31 Python
CSS3 新增选择器的实例
2019/11/13 HTML / CSS
swtich是否能作用在byte上,是否能作用在long上,是否能作用在String上
2013/07/06 面试题
文明宿舍获奖感言
2014/02/07 职场文书
做一个有道德的人活动方案
2014/08/25 职场文书
学校党委干部个人对照检查材料思想汇报
2014/10/09 职场文书
作文批改评语
2014/12/25 职场文书
勇敢的心观后感
2015/06/09 职场文书