解决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 17 Javascript
jq选项卡鼠标延迟的插件实例
May 13 Javascript
js实现的点击数量加一可操作数据库
May 09 Javascript
JavaScript字符串对象的concat方法实例(用于连接两个或多个字符串)
Oct 16 Javascript
jQuery实现的支持IE的html滑动条
Mar 16 Javascript
js点击按钮实现带遮罩层的弹出视频效果
Dec 19 Javascript
JS中生成随机数的用法及相关函数
Jan 09 Javascript
原生JavaScript制作微博发布面板效果
Mar 11 Javascript
值得分享的轻量级Bootstrap Table表格插件
May 30 Javascript
JavaScript实现定时页面跳转功能示例
Feb 14 Javascript
js仿微信抢红包功能
Sep 25 Javascript
mapboxgl区划标签避让不遮盖实现的代码详解
Jul 01 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房贷计算器实例代码,等额本息,等额本金
2017/04/01 PHP
解决Laravel 不能创建 migration 的问题
2019/10/09 PHP
屏蔽鼠标右键、Ctrl+n、shift+F10、F5刷新、退格键 的javascript代码
2007/04/01 Javascript
javascript不同页面传值的改进版
2008/09/30 Javascript
解析瀑布流布局:JS+绝对定位的实现
2013/05/08 Javascript
JavaScript实现仿网易通行证表单验证
2015/05/25 Javascript
纯JavaScript代码实现移动设备绘图解锁
2015/10/16 Javascript
异步JS框架的作用以及实现方法
2015/10/29 Javascript
JavaScript使用DeviceOne开发实战(一) 配置和起步
2015/12/01 Javascript
原生JS:Date对象全面解析
2016/09/06 Javascript
JS判断来路是否是百度等搜索索引进行弹窗或自动跳转的实现代码
2016/10/09 Javascript
第一次接触神奇的Bootstrap
2016/10/14 Javascript
ionic进入多级目录后隐藏底部导航栏(tabs)的完美解决方案
2016/11/23 Javascript
JS实现线性表的顺序表示方法示例【经典数据结构】
2017/04/11 Javascript
JS实现的简单标签点击切换功能示例
2017/09/21 Javascript
JS实现带动画的回到顶部效果
2017/12/28 Javascript
vue子传父关于.sync与$emit的实现
2019/11/05 Javascript
JS检索下拉列表框中被选项目的索引号(selectedIndex)
2019/12/17 Javascript
在vue中使用el-tab-pane v-show/v-if无效的解决
2020/08/03 Javascript
Vue中component标签解决项目组件化操作
2020/09/04 Javascript
详解vue3.0 的 Composition API 的一种使用方法
2020/10/26 Javascript
用pywin32实现windows模拟鼠标及键盘动作
2014/04/22 Python
python3操作mysql数据库的方法
2017/06/23 Python
用Django实现一个可运行的区块链应用
2018/03/08 Python
python使用matplotlib模块绘制多条折线图、散点图
2020/04/26 Python
django项目登录中使用图片验证码的实现方法
2019/08/15 Python
踩坑:pytorch中eval模式下结果远差于train模式介绍
2020/06/23 Python
ebookers英国:隶属全球最大的在线旅游公司Expedia
2017/12/28 全球购物
工商管理应届生求职信
2013/10/07 职场文书
分公司经理岗位职责
2013/11/11 职场文书
会计核算科岗位职责
2014/03/19 职场文书
房产买卖委托公证书
2014/04/04 职场文书
英语专业毕业生求职信
2014/05/24 职场文书
Oracle 区块链表创建过程详解
2021/05/15 Oracle
深入解析NumPy中的Broadcasting广播机制
2021/05/30 Python
Python中22个万用公式的小结
2021/07/21 Python