Vue3.0 POST 传参错误, 请指点!

Question

<template>
  <div>
     <el-row :gutter='20'>
            <!-- gutter表式行间距 -->
     </el-row>
        <!-- span 是列栅格  -->
    <el-row :gutter='20'>
        <el-col :span='6' :offset='8'>
          <el-form label-width="150px" > 
            <el-form-item label="用户名 :" >  
                <el-input v-model='username' type="text"/>
            </el-form-item>
            <el-form-item label="密码 :" >
                <el-input v-model='password' type="password"/>
            </el-form-item>
            <el-form-item>
                <el-button type="primary" @click="onSubmit">登录</el-button>
            </el-form-item>
          </el-form>
        </el-col>
    </el-row>
  </div>
</template>

<script>
import { reactive, toRefs } from 'vue'
export default {
  name: 'Login',
  setup () {
    const data = reactive({
      username: '',
      password: ''
    })
    async function onSubmit () {         //这行报错  Uncaught (in promise) TypeError: this is undefined, 格式错了吗?
      await this.$http.post('login', { username: data.username, password: data.password }, { emulateJSON: true })
    }
    return { ...toRefs(data), onSubmit }
  }
}
</script>

另外 element-plus 和 vue3.0 是不是兼容有问题? 有些莫名其妙的 BUG

Answer 1

哈喽，vue3中的this应该按这种写法获取

import {  getCurrentInstance } from 'vue'
export default {
  setup () {
    const {proxy} = getCurrentInstance()
    // proxy等同于vue2的this
    return { }
  }
}

所以代码可以改成如下：

import { reactive, toRefs, getCurrentInstance } from 'vue'
export default {
  name: 'Login',
  setup () {
    const {proxy} = getCurrentInstance()
    const data = reactive({
      username: '',
      password: ''
    })
    async function onSubmit () {         
      await proxy.$http.post('login', { username: data.username, password: data.password }, { emulateJSON: true })
    }
    return { ...toRefs(data), onSubmit }
  }
}

不过，建议vue3直接用引入的方式去使用公共方法，不使用$挂全局方法

import { 函数 }  from '模块地址'