乾坤框架記錄

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

})  

})