Vuetify는 Vue-Toastification에서 기본값을 로드할 수 없습니다.

Question

제가 시도한 것은 사용자 정의 구성 요소와 Toast의 일부 Vuetify 구성 요소를 사용한 vue-toastification이었습니다. npm create vuetify@latest를 사용하여 저장소를 생성하고 npm i vue-toastification@latest 라이브러리를 설치했습니다. 그런 다음 플러그인을 사용했습니다:

<code>// main.ts

//토스트화
"vue-toastification"에서 토스트 가져오기, { POSITION };
import "vue-toastification/dist/index.css";

const app = createApp(앱);

const 옵션 = {
  shareAppContext: true, // https://github.com/Maronato/vue-toastification#access-global-comComponents-and-plugins-inside-toasts에서
  위치: POSITION.BOTTOM_CENTER,
};

등록플러그인(앱);

app.use(토스트, 옵션);

<p>그런 다음 다음 코드를 사용하여 toast를 호출해 보았습니다. </p>
<pre class="lang-js Prettyprint-override"><code>// store/error.ts

"vue-toastification"에서 import { useToast }를;;
"@/comComponents/MyComponent.vue"에서 MyComponent를 가져옵니다.

const 토스트 = useToast();

내보내기 const useErrorStore = DefineStore("error", () => {
  함수 위치 오류() {
    토스트(MyComponent);
  }
});

<p>내 구성요소: </p>
<pre class="lang-js Prettyprint-override"><code>// Components/MyComponent.vue

<템플릿>
  <div class="컨테이너">
    <v-컨테이너>
      <v-행>
        <v-col> 경고 예 </v-col>
        <v-col>
          <v-btn @click="새로고침">새로고침</v-btn>
        </v-col>
      </v-row>
    </v-컨테이너>
  </div>
</템플릿>

<스크립트 설정 lang="ts">
함수 다시 로드() {
  if (창 유형 !== "정의되지 않음") {
    window.location.reload();
  }
}
</스크립트>

<p>我从App.vue文件中调사용처：</p>
<pre class="lang-js Prettyprint-override"><code>// App.vue

<템플릿>
  <v-앱>
    <v-메인>
      <v-btn @click="loc">위치 오류</v-btn>
    </v-메인>
  </v-앱>
</템플릿>

<스크립트 설정 lang="ts">
"./store/error"에서 import { useErrorStore }를;

const errorStore = useErrorStore();

함수 loc() {
  errorStore.locationError();
}
</스크립트>

<p>但是는 运行时，当我点击按钮时，我得到以下错误：</p>
<pre class="brush:php;toolbar:false;">[Vue 경고]: 삽입 "Symbol(vuetify:defaults)" 찾을 수 없습니다. 
  <VContainer> 
  <MyComponent key=1 toast-id=0 onCloseToast=fn<bound closeToast> > 
  <VtToast key="_default00"에서 position="하단 중앙" 드래그 가능=true ... > 
  <TransitionGroup tag="div" enter-active-class="Vue-Toastification__bounce-enter-active" move-class="Vue-Toastification__bounce-move"  ... > 
  <VtTransition 전환="Vue-Toastification__bounce" class="Vue-Toastification__컨테이너 하단 중앙" > 
  <VueToastification eventBus= EventBus {allHandlers: {…}} shareAppContext= {_uid: 0, _comComponent: {…}, _props: null, _container: div#app, _context: {…}, …} position="하단 -센터'' >

[Vue 경고]: 설정 기능 실행 중 처리되지 않은 오류 
  <VContainer> 
  <MyComponent key=1 toast-id=0 onCloseToast=fn<bound closeToast> > 
  <VtToast key="_default00"에서 position="하단 중앙" 드래그 가능=true ... > 
  <TransitionGroup tag="div" enter-active-class="Vue-Toastification__bounce-enter-active" move-class="Vue-Toastification__bounce-move"  ... > 
  <VtTransition 전환="Vue-Toastification__bounce" class="Vue-Toastification__컨테이너 하단 중앙" > 
  <VueToastification eventBus= EventBus {allHandlers: {…}} shareAppContext= {_uid: 0, _comComponent: {…}, _props: null, _container: div#app, _context: {…}, …}position="하단 중앙" >

[Vue 경고]: 스케줄러 플러시 실행 중 처리되지 않은 오류가 발생했습니다. 이는 Vue 내부 버그일 가능성이 높습니다. https://new-issue.vuejs.org/?repo=vuejs/core에서 문제를 열어주세요. 
  <VContainer> 
  <MyComponent key=1 toast-id=0 onCloseToast=fn<bound closeToast> > 
  <VtToast key="_default00"에서 position="하단 중앙" 드래그 가능=true ... > 
  <TransitionGroup tag="div" enter-active-class="Vue-Toastification__bounce-enter-active" move-class="Vue-Toastification__bounce-move"  ... > 
  <VtTransition 전환="Vue-Toastification__bounce" class="Vue-Toastification__컨테이너 하단 중앙" > 
  <VueToastification eventBus= EventBus {allHandlers: {…}} shareAppContext= {_uid: 0, _comComponent: {…}, _props: null, _container: div#app, _context: {…}, …} position="하단 -센터'' >

포착되지 않은(약속 있음) 오류: [Vuetify] 기본 인스턴스를 찾을 수 없습니다.
    injectDefaults에서 (defaults.ts:28:24)
    설정 시(defineComponent.tsx:118:24)
    callWithErrorHandling에서(runtime-core.esm-bundler.js:158:18)
    setupStatefulComponent(runtime-core.esm-bundler.js:7236:25)에서
    setupComponent에서 (runtime-core.esm-bundler.js:7197:36)
    mountComponent에서(runtime-core.esm-bundler.js:5599:7)
    processComponent에서(runtime-core.esm-bundler.js:5565:9)
    패치 시(runtime-core.esm-bundler.js:5040:11)
    mountChildren에서(runtime-core.esm-bundler.js:5284:7)
    mountElement(runtime-core.esm-bundler.js:5191:7)

저는 Vuetify를 이용하고 있나요?

저는 여기에서 다른 회사에 있습니다.

Answer 1

Vuetify 구성 요소는 VApp 요소 내에 래핑되어야 합니다. 기본적으로 Vue 토스트화 컨테이너는 HTML 본문에 연결됩니다(VApp 컨테이너의 형제가 됨). 이 문제를 해결하려면 vue toastification 플러그인을 설치할 때 다음 코드를 추가하면 됩니다:

으아악

컨테이너는 토스트가 마운트되어야 하는 요소입니다: HTMLElement 또는 HTMLElement를 반환/파싱하는 함수입니다. Vuetify 앱 요소는 ID가 #app

인 div여야 합니다.

i18n의 $t와 같이 구성 요소에 사용될 수 있는 다른 전역 플러그인에 액세스하려면 애플리케이션 컨텍스트에 액세스해야 할 수도 있습니다. 이는 shareAppContext 옵션을 추가하여 달성할 수 있습니다. 추가 정보