Vue3的Uncaught (in promise) TypeError: Cannot read properties of undefined (reading ‘post’)

提示：在vue3的环境下利用axios发起请求

问题描述

提示：这里描述项目中遇到的问题：在利用this.$http方法发起请求时，却发现$http中的post是undefined

 methods:{// 点击重置对象  重置登录表单resetLoginForm(){// console.log(this);this.$refs.loginFormRef.resetFields()// console.log( this.$refs);},login() {console.log(this);this.$refs.loginFormRef.validate(async valid => {console.log(valid);if (!valid) return// 如果为true则发起请求此时需要配包const { data: res } = await this.$http.post('/login', this.loginForm)console.log(res)if (res.meta.code !== 200) return this.$message.error('登录失败！')this.$message.success('登录成功')})}}

原因分析：

（1）怀疑是在main.js中axios的挂载不成功
（2）怀疑是在login（）中的使用方法不对
（3）怀疑是this的指向不正确

解决方案：

（1）在login（）中打印this和this.http发现this的指向无问题，但this.http发现this的指向无问题，但this.http发现this的指向无问题，但this.http却是undefined
（2）在查询资料之后，发现可以从app.config.globalProperties的使用来解决问题。
从vue3的使用可以知道，想在添加一个可以在应用的任何组件实例中访问的全局 property，是通过以下的方法：

const Vue = createApp(App)
Vue.config.globalProperties.$http = axios

当在组件内调用http时需要使用getCurrentInstance()来获取。
需要注意的是，虽然proxy也可ctx代替，但ctx代替this只适用于开发阶段，如果将项目打包放到生产服务器上运行，就会出错，ctx无法获取路由和全局挂载对象的

import { getCurrentInstance} from "vue";
export default {setup( ) {const { proxy } = getCurrentInstance(); //获取上下文实例，proxy=vue2的this},
};

但是在使用了该方法却没解决问题。
再次进行检查之后，发现是注册实例的问题

const Vue = createApp(App)
Vue.config.globalProperties.$http = axios{ createApp }.use(router).use(ElementPlus).mount('#app')

由以上代码可知真正全局挂载了$http的实例是Vue，但是login组件却在实例{ createApp }上，所以需要统一实例对象。如下

const Vue = createApp(App)
Vue.config.globalProperties.$http = axios
Vue.use(router).use(ElementPlus).mount('#app')

至此将post的undefined解决完毕。
但是post的undefined的一般解决方法是上面提到的getCurrentInstance()以及在vue3中this的使用（也会使用到getCurrentInstance()），下面做补充：

import { getCurrentInstance } from 'vue'
const instance = getCurrentInstance()
const _this= instance.appContext.config.globalProperties

这里的_this相当于vue2中的this
即_this.$http.post(’/login’, this.loginForm)

我的问题是粗心问题，但有可能有人和我一样所以分享一下具体的解决方法可以参考别的博主的（他们的会更加详细）

解决Vue3的undefined问题相关推荐

解决Call to undefined function
解决Call to undefined function PHPApacheWindowsCC++ 在使用php时报错Call to undefined function curl_init解决方法是 ...
(已解决)vue3使用axios报Uncaught TypeError: Cannot convert undefined or null to object axios.js:1308错误
在学习使用vue3.04和axios0.24版本请求ajax时候,出现了下图错误 Uncaught TypeError: Cannot convert undefined or null to obj ...
解决Vue3报错：app.js:314 Uncaught TypeError: Cannot read properties of undefined (reading ‘forEach‘)
配置 vue3的时候,总是出现错误,但好像所有流程都是对的,也没错. 解决方案,可能是配置的routes写错了写成了routers
php class variable,解决关于PHP“Undefined variable”变量未定义
php中变量可以不定义的但是我们如果不对错误进行一些处理在使用未定义的变量时会提示Undefined variable错误了,下面我给大家举几个实例. PHP错误提示"Undefined v ...
QT编译出错解决 libQtCore.so: undefined reference to `QInotifyFileSystemWatcherEngine::create()'
可能出错1: libQtCore.so: undefined reference to `QInotifyFileSystemWatcherEngine::create()' 解决办法: vi ./s ...
解决 Vue3.0 globalThis is note defined
问题引发原因: 浏览器不支持 es2020 以下兼容性表解决方式: 0.0 其实吧,老兄,别折腾了,赶紧升级浏览器吧升级浏览器版本以支持 es2020 临时方案在index.html head ...
解决vue3中echarts的tooltip组件不显示的问题
data() {return {chartInstance: ''} },mounted() {if(!this.chartInstance) this.chartInstance = echarts ...
解决Error L6218E Undefined symbol XXX....问题
分享一个keil的错误编译提示以及其问题解决方法,当我们碰到"Error L6218E Undefined symbol XXX-"这个错误提示,其实出现这问题的原因就是我们调用了 ...
解决 vue3的 import { ref , reactive ... } 引入繁琐问题
在vue3中每个页面都需要引用ref,reactive不是很方便,为了方便需要安装下unplugin-auto-import插件,这样就不用每个页面都需要引用了. 1.下载安装 cnpm i unpl ...
解决Vue3的ts报错：类型“{}”上不存在属性“xxx”，两种方法彻底根治
刚创建的一个Vue3和Ts的项目,结果使用Vscode打开后,修改了index.vue文件就报错了: 网上找了各种原因,有让添加jsconfig.json文件的,有让新建一个项目的,有的直接放弃ts的 ...

解决Vue3的undefined问题

Vue3的Uncaught (in promise) TypeError: Cannot read properties of undefined (reading ‘post’)

问题描述

原因分析：

解决方案：

解决Vue3的undefined问题相关推荐

最新文章

热门文章