vue3에서 전역 변수를 정의하는 방법

vue3은 전역 변수를 정의합니다

vue2에서는 vue2.x가 Vue.prototype.$xxxx=xxx를 사용하여 전역 변수를 정의하고, this.$xxx를 통해 전역 변수를 얻는다는 것을 알고 있습니다.

그러나 vue3에서는 이 방법이 분명히 작동하지 않습니다. vue3에서는 이를 설정할 수 없기 때문에 공식 문서에 따르면 다음 방법을 사용하여 전역 변수를 정의합니다.

먼저 시스템 ID와 같이 main.js에서 정의하려는 전역 변수를 작성합니다

app.config.globalProperties.$systemId = "10"

이제 페이지에서 이 변수를 사용해야 하며, vue에서 getCurrentInstance를 도입하기만 하면 됩니다. 페이지에서는 이 변수를 사용할 수 없습니다.

import { getCurrentInstance } from "vue";
const systemId = getCurrentInstance()?.appContext.config.globalProperties.$systemId
console.log(systemId);//控制台可以看到输出了10

vue3 전역 변수 app.config.globalProperties

globalProperties

• type :[key: string]: any

• Default: unundefined

• Usage

애플리케이션의 모든 구성 요소 인스턴스에서 액세스할 수 있는 전역 속성을 추가합니다. 이름 충돌이 발생하면 구성 요소 속성이 우선적으로 적용됩니다.

이것은 Vue 2.x Vue.prototype 확장을 대체할 수 있습니다:

// 之前(Vue 2.x)
Vue.prototype.$http = () => {}
 
// 之后(Vue 3.x)
const app = Vue.createApp({})
app.config.globalProperties.$http = () => {}

구성 요소 내에서 http를 호출하려면 getCurrentInstance()를 사용하여 이를 가져와야 합니다.

import { getCurrentInstance, onMounted } from "vue";
export default {
  setup( ) {
    const { ctx } = getCurrentInstance(); //获取上下文实例，ctx=vue2的this
    onMounted(() => {
      console.log(ctx, "ctx");
      ctx.http();
    });
  },
};

getCurrentInstance는 컨텍스트, 즉 현재 인스턴스를 나타냅니다. ctx는 Vue2와 동일하지만, 이 대신 ctx는 개발 단계에만 적합하다는 점에 유의해야 합니다. 프로젝트가 패키지되어 프로덕션 서버에서 실행되면 ctx가 라우팅 및 글로벌을 얻을 수 없습니다. 장착 물체. 이 문제에 대한 해결책은 ctx 대신 프록시를 사용하는 것입니다. 코드 참조는 다음과 같습니다.

아아아아

위 내용은 vue3에서 전역 변수를 정의하는 방법의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!