Provide 및 Inject를 사용하여 Vue3 플러그인을 만드는 방법

Vue3 플러그인이 이전과 다르게 작동하는 이유

Vue2에서는 대부분의 플러그인이 여기에 속성을 주입합니다. 예를 들어 Vue 라우터는 this.$router를 통해 액세스할 수 있습니다.

그러나 setup() 메서드에는 더 이상 이에 대한 동일한 참조가 포함되지 않습니다. 이 변경의 주된 이유는 Typescript에 대한 지원을 추가하기 위한 것입니다.

그렇다면 Vue3의 플러그인에 어떻게 액세스할 수 있나요? Provide와 Inject를 사용하여 Vue 프로그램에 종속성을 주입할 수 있습니다. Provide/inject는 종속성 주입에 사용되며 이를 통해 Vue 프로그램의 루트 디렉터리에 플러그인을 제공한 다음 하위 구성 요소에 주입할 수 있습니다.

Composition API에서 이 두 메서드는 setup() 메서드 중에만 호출할 수 있습니다.

provide와 inject는 무엇입니까

종속성을 식별하려면 일종의 키가 필요하며 Javascript의 기호는 이러한 요구 사항을 복합적으로 적용할 수 있습니다.

그런 다음 제공 메소드는 기호를 값과 연결하고 주입 메소드는 동일한 기호로 이 값을 검색합니다.

예는 다음과 같습니다.

import { provide, inject } from 'vue'  const LoggedInSymbol = Symbol()  const ParentComponent = {   setup() {     provide(LoggedInSymbol, true)   } }  const DeepDescendent = {   setup() {     // 第二个可选参数是默认值（如果不存在）     const isLoggedIn = inject(LoggedInSymbol, false)     return {       isLoggedIn     }   } }

Vue3는 이 모드를 통해 매우 실용적인 기술을 구현할 수 있습니다.

종속성은 프로그램에서 전역적으로 제공될 수 있습니다

전역 범위에서 무언가를 제공하고 싶다면 VUE 인스턴스를 선언할 때 app.provide를 사용할 수 있습니다. 그런 다음 동일한 방법으로 주입을 수행할 수 있습니다.

main.jsimport { createApp } from 'vue' import App from './App.vue'   const app = createApp(App)  const ThemeSymbol = Symbol() app.provide(ThemeSymbol, 'dark')   app.mount('#app')

ref를 사용하여 반응형 데이터를 제공할 수 있습니다

이는 반응형 데이터를 하위 구성 요소에 전달하려는 경우에도 매우 편리합니다. 우리 메소드의 반응성 속성을 전달하려면 ref()를 사용하세요.

// 生产者r (父组件) const LoggedInSymbol = Symbol() const loggedIn = ref('true') provide(LoggedInSymbol, loggedIn)  // 消费者 (子组件) const theme = inject(LoggedInSymbol, ref('false'))

플러그인에서 제공 및 주입 방법

실제로 플러그인을 디자인하는 것은 방금 본 간단한 예와 매우 유사합니다.

하지만 우리는 단일 값이 아닌 결합된 함수를 사용하고 싶습니다. 이는 Vue3의 큰 장점입니다. 기능을 기반으로 코드를 구성하고 추출하는 기능입니다.

어쨌든 우리 코드는 체계적인 구성 함수로 작성되어야 하므로 플러그인을 작성하려면 이러한 제공 및 주입 메소드만 생성하면 됩니다.

먼저 Vue3 Composition API 문서에 제공되는 플러그인 예제를 간략하게 살펴보겠습니다.

Plugin.jsconst StoreSymbol = Symbol()  export function provideStore(store) {   provide(StoreSymbol, store) }  export function useStore() {   const store = inject(StoreSymbol)   if (!store) {     // throw error, no store provided   }   return store }

는 실제 컴포넌트에서 다음과 같이 사용됩니다.

// 在组件根目录提供 store // const App = {   setup() {     provideStore(store)   } }  const Child = {   setup() {     const store = useStore()     // use the store   } }

위 코드에 따르면 일부 루트 컴포넌트에서는 플러그인을 제공하고 컴포넌트 기능을 전달합니다. 그런 다음 이를 사용하려는 구성 요소에 삽입해야 합니다.

구성 요소는 실제로 제공/주입 호출을 수행할 필요가 없으며 플러그인에 의해 노출된 ProvideStore/useStore 메서드만 호출합니다.

이전 플러그인을 계속 사용할 수 있나요?

간단히 말하면: 그렇습니다. 더 말하고 싶은 것은 각자의 생각에 달려 있다.

옵션 API를 계속 사용하고 이전과 동일한 방식으로 이를 참조할 수 있으며 모든 이전 플러그인은 변경되지 않고 작동합니다.

하지만 Vue3으로 마이그레이션하고 모든 기능을 활용하는 것은 그만한 가치가 있다고 느껴집니다.

Vue2의 옵션 API를 사용하려는 한 플러그인은 정상적으로 작동합니다. 그러나 잘 관리되는 많은 플러그인이나 라이브러리에는 Vue3에 대한 지원이 추가되어야 합니다.

위 내용은 Provide 및 Inject를 사용하여 Vue3 플러그인을 만드는 방법의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!