巨抽象的前端vue3

根据实践证明，越是简单的问题，越容易造成大bug

一个自定义组件的路径就废了我老半天了

各种查询，各种百度，各种问，结果规规矩矩去导入组件路径，成了！

错误代码：

<script setup>
import {reactive} from "vue";
import {post} from "@/api/RomaApi.js";
import router from "@/router/index.js";

const form = reactive({
  username:"",
  password:"",
  remember:false
})

const login = () => {
  if (!form.username || !form.password){
    alert("请填写账号和密码")
  }
  if (form.username || form.password){
    post("/api/auth/login",{
          username : this.username,
          password : this.password,
          remember : this.remember
        },
        (message)=>{
          alert(message)
          router.push("/book")
        })
  }
}
</script>

一方面是组件的路径需要注意，不管是vue3还是别的语言，这点需要十分注意

第二点，那就是关于this的使用，在同一作用域，同一个作用里面用this，在两个不同的作用域里使用this，他不报错，但是你的程序逻辑会出问题，当你一直反复提交时，都是白费

这边是打印不出任何数据的