乾坤框架记录

tianyawhl

发布于 2024-03-05 01:17:28

10200

代码可运行

文章被收录于专栏：前端之攻略前端之攻略

运行总次数：0

代码可运行

axios在vue3中使用

// import {https} from "./https.js"
import axios from "axios"
// import ElementUI from 'element-ui'

export const axiosInstance = axios.create({
    baseURL: '/',
    //  baseURL: https.safetyAxiosURL
});

main.js中引用并注册

 import  { axiosInstance }  from   "./assets/js/axiosInstance.js" 
 app  =  createApp ( App ); 
 app . config . globalProperties . $axiosInstance  =  axiosInstance ;

页面中应用

 import  { computed ,  getCurrentInstance ,  onMounted , ref }  from   "vue" ; 
 const  { proxy } =  getCurrentInstance (); 
   proxy . $axiosInstance . get ( "html/app-01/mock/data.json" ). then ( res   =>  { 
   console . log ( res . data . data ) 
 })

子应用间传值

一个应用定义并触发自定义事件

   <el-button   type = "primary"  @ click = " setStorageContent " >一个页面 设置存储内容 </el-button> 
    function   setStorageContent (){ 
    storageContent . value  =  Math . random () 
    // sessionStorage.setItem("testSessionStorage",storageContent.value) 
    const   cusevent  =  new   CustomEvent ( "customEvent" ,{ detail : { message : storageContent . value }}) 
    console . log () 
    window . dispatchEvent ( cusevent ) 
  }

另一个子应用监听事件

  onMounted (() => { 
  window . addEventListener ( 'customEvent' ,  event   =>  { 
    console . log ( event . detail . message ) 
    test . value  =  event . detail . message 
  })   
  })

本文参与腾讯云自媒体同步曝光计划，分享自作者个人站点/博客。

原始发表：2024-03-05，如有侵权请联系 cloudcommunity@tencent.com 删除

import