解决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的eval()中使用函数的进一步讨论
Jul 26 Javascript
JS实现在线统计一个页面内鼠标点击次数的方法
Feb 28 Javascript
js限制文本框的输入内容代码分享(3类)
Aug 20 Javascript
javascript中的正则表达式使用详解
Aug 30 Javascript
浅谈js函数中的实例对象、类对象、局部变量(局部函数)
Nov 20 Javascript
angularjs实现下拉列表的选中事件示例
Mar 03 Javascript
xmlplus组件设计系列之路由(ViewStack)(7)
May 02 Javascript
vue学习之mintui picker选择器实现省市二级联动示例
Oct 12 Javascript
最适应的vue.js的form提交涉及多种插件【推荐】
Aug 27 Javascript
在Node.js中将SVG图像转换为PNG,JPEG,TIFF,WEBP和HEIF格式的方法
Aug 22 Javascript
vue+Element中table表格实现可编辑(select下拉框)
May 21 Javascript
vue实现简单全选和反选功能
Sep 15 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
实用函数5
2007/11/08 PHP
用js解决数字不能换行问题
2010/08/10 Javascript
Prototype源码浅析 Enumerable部分(二)
2012/01/18 Javascript
javascript教程:关于if简写语句优化的方法
2014/05/17 Javascript
Jquery 实现checkbox全选方法
2015/01/28 Javascript
基于jQuery 实现bootstrapValidator下的全局验证
2015/12/07 Javascript
js创建jsonArray传输至后台及后台全面解析
2016/04/11 Javascript
Ionic如何实现下拉刷新与上拉加载功能
2016/06/03 Javascript
BootStrap 动态添加验证项和取消验证项的实现方法
2016/09/28 Javascript
javascript的document中的动态添加标签实现方法
2016/10/24 Javascript
EasyUI Combobox设置默认值 获取text的方法
2016/11/28 Javascript
微信小程序-获得用户输入内容
2017/02/13 Javascript
jQuery实现节点的追加、替换、删除、复制功能示例
2017/07/11 jQuery
webpack+vue2构建vue项目骨架的方法
2018/01/09 Javascript
vue代理和跨域问题的解决
2018/07/18 Javascript
详解mpvue开发微信小程序基础知识
2019/09/23 Javascript
Vue开发环境跨域访问问题
2020/01/22 Javascript
vue实现的封装全局filter并统一管理操作示例
2020/02/02 Javascript
[49:42]DOTA2上海特级锦标赛主赛事日 - 3 胜者组第二轮#2Secret VS EG第一局
2016/03/04 DOTA
基于Python的身份证号码自动生成程序
2014/08/15 Python
Python with的用法
2014/08/22 Python
对pandas的dataframe绘图并保存的实现方法
2017/08/05 Python
Python 模拟购物车的实例讲解
2017/09/11 Python
python九九乘法表的实例
2017/09/26 Python
python爬虫之快速对js内容进行破解
2019/07/09 Python
Python Django 封装分页成通用的模块详解
2019/08/21 Python
Python 整行读取文本方法并去掉readlines换行\n操作
2020/09/03 Python
PyQt5多线程防卡死和多窗口用法的实现
2020/09/15 Python
手工制作的豪华英式沙发和沙发床:Willow & Hall
2019/05/03 全球购物
预订旅游活动、景点和旅游:GetYourGuide
2019/09/29 全球购物
环保建议书100字
2014/05/14 职场文书
2014年学校办公室工作总结
2014/12/19 职场文书
先进单位申报材料
2014/12/25 职场文书
暑假安全保证书
2015/02/28 职场文书
python可视化之颜色映射详解
2021/09/15 Python
win10此电脑打不开怎么办 win10双击此电脑无响应的解决办法
2022/07/23 数码科技