乾坤框架记录

axios在vue3中使用

代码语言：javascript复制

// 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中引用并注册

代码语言：text复制

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

页面中应用

代码语言：text复制

 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 ) 
 }) 

子应用间传值

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

代码语言：text复制

   <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 ) 
  } 

另一个子应用监听事件

代码语言：text复制

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

import 框架 事件 存储 axios

0 人点赞