解决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 (用setTimeout而非setInterval)
Dec 28 Javascript
javascript计算用户打开网页的停留时间
Jan 09 Javascript
JSONP跨域的原理解析及其实现介绍
Mar 22 Javascript
jQuery获取选中内容及设置元素属性的方法
Jul 09 Javascript
jQuery实现点击图片翻页展示效果的方法
Feb 16 Javascript
Javascript的比较汇总
Jul 25 Javascript
基于DOM节点删除之empty和remove的区别(详解)
Sep 11 Javascript
JavaScript 有用的代码片段和 trick
Feb 22 Javascript
vue axios请求频繁时取消上一次请求的方法
Nov 10 Javascript
微信小程序在线客服自动回复功能(基于node)
Jul 03 Javascript
Vue3 中的数据侦测的实现
Oct 09 Javascript
vue实现折线图 可按时间查询
Aug 21 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颜色转换函数hex-rgb(将十六进制格式转成十进制格式)
2013/09/23 PHP
PHP封装的HttpClient类用法实例
2015/06/17 PHP
JavaScript和JQuery实用代码片段(一)
2010/04/07 Javascript
分析Node.js connect ECONNREFUSED错误
2013/04/09 Javascript
JQuery对表单元素的基本操作使用总结
2014/07/18 Javascript
浅谈在js传递参数中含加号(+)的处理方式
2016/10/11 Javascript
基于JS组件实现拖动滑块验证功能(代码分享)
2016/11/18 Javascript
详解Vue生命周期的示例
2017/03/10 Javascript
通过命令行创建vue项目的方法
2017/07/20 Javascript
vue组件三大核心概念图文详解
2019/05/30 Javascript
JavaScript中的连续赋值问题实例分析
2019/07/12 Javascript
使用js实现单链解决前端队列问题的方法
2020/02/03 Javascript
vue自定义插件封装,实现简易的elementUi的Message和MessageBox的示例
2020/11/20 Vue.js
vue中配置scss全局变量的步骤
2020/12/28 Vue.js
js基于canvas实现时钟组件
2021/02/07 Javascript
[52:36]VGJ.S vs Serenity 2018国际邀请赛小组赛BO2 第一场 8.19
2018/08/21 DOTA
python实现的登录和操作开心网脚本分享
2014/07/09 Python
python实现简单socket程序在两台电脑之间传输消息的方法
2015/03/13 Python
Python利用Beautiful Soup模块修改内容方法示例
2017/03/27 Python
利用python解决mysql视图导入导出依赖的问题
2017/12/17 Python
django开发post接口简单案例,获取参数值的方法
2018/12/11 Python
Python 通过requests实现腾讯新闻抓取爬虫的方法
2019/02/22 Python
python语言基本语句用法总结
2019/06/11 Python
django如何通过类视图使用装饰器
2019/07/24 Python
使用OpenCV实现仿射变换—缩放功能
2019/08/29 Python
解决tensorflow训练时内存持续增加并占满的问题
2020/01/19 Python
Python API len函数操作过程解析
2020/03/05 Python
在keras 中获取张量 tensor 的维度大小实例
2020/06/10 Python
python中_del_还原数据的方法
2020/12/09 Python
CSS教程:CSS3圆角属性
2009/04/02 HTML / CSS
安全检查与奖惩制度
2014/01/23 职场文书
2014市国税局对照检查材料思想汇报
2014/09/23 职场文书
先进基层党组织材料
2014/12/25 职场文书
考研导师推荐信范文
2015/03/27 职场文书
商场圣诞节活动总结
2015/05/06 职场文书
班主任工作总结范文
2015/08/13 职场文书