Vue3问题记录

Vue3问题记录

使用elementPlus消息提示

第一种方法

先在组件中引入ElMessage

import { ElMessage } from "element-plus";

然后使用

ElMessage.success('提交成功')

第二种方法

在组件上添加如下代码

const currentInstance = getCurrentInstance()
const { $message } = currentInstance.appContext.config.globalProperties

使用时这么写:

const handleLogin = () => {
  formRef.value.validate((valid) => {
    if (valid) {
      $message.success('提交成功')
    } else {
      $message.error('提交失败')
      return false
    }
  })
}

第二种写法与之前vue2更类似,但多了一步引入的过程

全局挂载axios以及跨域

第一种方法

参考vue2的写法,前端引用时复杂一点

main.js中的写法

import { createApp } from 'vue'
import App from './App.vue'
import router from './router'
import store from './store'
import ElementPlus from 'element-plus'
import 'element-plus/dist/index.css'
import '@/styles/index.scss'
import SvgIcon from '@/icons'
import axios from 'axios'

const app = createApp(App)
axios.defaults.baseURL = 'http://127.0.0.1:3011/api/'
app.config.globalProperties.$axios = axios

SvgIcon(app)
app.use(store).use(router).use(ElementPlus).mount('#app')

这里跨域与vue2差不多,axios这里的不用改

组件上使用axios时变麻烦了,如下

先引入

const currentInstance = getCurrentInstance()
const { $axios, $message} = currentInstance.appContext.config.globalProperties

然后使用

const handleLogin = () => {
  formRef.value.validate((valid) => {
    if (valid) {
      $axios.post('/user/login', form)
      .then(res => {
        // console.log(res.data)
        $message.success('提交成功')
        router.push('/')
      })
      // $message.success('提交成功')
    } else {
      $message.error('提交失败')
      return false
    }
  })

第二种写法(推荐)

使用VueAxios插件

main.js中引入

import {createApp} from 'vue'
import App from './App.vue'
import router from './router'
import store from './store'
import axios from 'axios'
import VueAxios from "vue-axios";

const app = createApp(App)
app.use(VueAxios, axios)

// app.config.globalProperties.$axios = axios

app.use(store).use(router).mount('#app')

核心代码

import VueAxios from "vue-axios";

app.use(VueAxios, axios)

前端页面可以直接用

如下:

getUser() {
      this.axios.post('http://127.0.0.1:3011/api/user/login', {
        username: 'admin',
        password: "123456",
      })
      .then(res => {
        console.log(res.data)
      })
    }

写法稍微有点不一样,没有使用$

第三种写法

2022-12-15日更新
在新写项目时,发现第二种方法不好用了,排查了半天没排查出来,现在进行第三种写法
main.js文件

import { createApp } from "vue";
import "./style.css";
import App from "./App.vue";
import { naive, createDiscreteApi } from "naive-ui";
import { createPinia } from "pinia";
import router from "./router";
import axios from "axios";
// import VueAxios from "vue-axios";
const { message, notification, dialog } = createDiscreteApi([
  "message",
  "dialog",
  "notification",
]);
axios.defaults.baseURL = "http://127.0.0.1:3030/api";

const app = createApp(App);
// app.use(VueAxios, axios)
// 全局使用axios及naive-ui的提示组件
app.provide("axios", axios);
app.provide('message', message)
app.provide('notification', notification)
app.provide('dialog', dialog)

app.use(naive);
app.use(createPinia());
app.use(router);
app.mount("#app");

关键代码
app.provide("axios", axios);
vue组件上的写法

import { ref, reactive, inject } from 'vue'
const axios = inject('axios')
const login = async () => {
    let result = await axios.post('/admin/login', {
    })
   
}

组件上分三步使用

  1. 从vue中导入inject;
  2. 使用inject注入axios;
  3. 需要调用接口时,直接使用axios

需要注意的是,在main.js中,app.provide("axios", axios);"axios"是axios的别名,这里写的啥,调用接口时就用啥,如果写成app.provide("http", axios);那么组件调用axios时就得写成http进行接口调用

路由配置

vue2中路由的配置很简单,在main.js中引入之后,vue组件上使用this.$router.push即可实现路由的跳转,但vue3相对来说更麻烦了,分三步

  1. main.js文件中引入,这与vue2基本一致
import router from "./router";
import { createApp } from "vue";
const app = createApp(App);
app.use(router);
app.mount("#app");
  1. vue组件上引入路由,并进行调用
import { useRoute, useRouter } from 'vue-router'
const route = useRoute()
const router = useRouter()

3、需要路由跳转时使用,如登录成功后,router.push('/dashboard')

未完待续~~~

  • 0
    点赞
  • 1
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

栀椩

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付:¥1
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值