임의 비POJO를 문자열화할 수 없음 및 잘못된 프로펠러: 유형 확인 실패 경고

임의 비POJO를 문자열화할 수 없음 및 잘못된 프로펠러: 유형 확인 실패 경고

프로젝트에서 일부 제품 범주를 로드하는 중Prismic세로 막대로 표시한다.이것은 오늘 초까지 완벽하게 잘 작동했지만, 나는 지금 다음과 같은 경고를 받고 있다.

vue.runtime.esm.js?2b0e:619 [Vue warn]: Invalid prop: type check failed for prop "category". Expected Category, got Object 

found in

---> <SidebarItem> at components/SidebarItem.vue
       <Sidebar> at components/Sidebar.vue
         <App> at pages/index.vue
           <Nuxt>
             <Layouts/default.vue> at layouts/default.vue
               <Root>

[Vue warn]: Invalid prop: type check failed for prop "category". Expected Category, got Object 

found in

---> <SidebarSection> at components/SidebarSection.vue
       <Sidebar> at components/Sidebar.vue
         <App> at pages/index.vue
           <Nuxt>
             <Layouts/default.vue> at layouts/default.vue
               <Root>

[Vue warn]: Invalid prop: type check failed for prop "category". Expected Category, got Object 

found in

---> <SidebarItem> at components/CategoryHeader.vue
       <App> at pages/index.vue
         <Nuxt>
           <Layouts/default.vue> at layouts/default.vue
             <Root>

사이드바 카테고리가 예상대로 나타나고 있음에도 불구하고 그렇다.처음에는 어떻게 이런 일이 일어날 수 있는지 이해할 수 없었다.그러나 나는 또한 다음과 같은 경고를 보고 있다는 것을 알아차렸다.

WARN Cannot stringify arbitrary non-POJOs Navigation

이 논의를 바탕으로 현재 버전의 devalue lib가 실패하고 있는 것 같다.Vuex이 경고가 잘못되고 있는 겁니다이 결론은 내가 옳고 이 경고들을 쉽게 해결할 수 있는 방법이 있을까?이 게시물에는 모델을 수정하기 위한 플러그 인을 만드는 것이 언급되어 있지만, 이것을 어디에 삽입해야 할지 모르겠다(Nuxt/Vue 등에서는 매우 새로운 것임).

이러한 경고를 해결할 방법이 없는 경우 Vuex 상태에서 사용자 지정 유형 사용을 중지하고 일반 개체를 대신 사용하는 것이 내 유일한 옵션인가?

어떤 맥락에서 볼 때, 내 Vue 파일은 다음과 같다.나는 그들이 모두 타당하다고 믿는다.

index.vue:

<template>
  <div>
    <NavBar />
    <!-- <Header /> -->
    <main>
      <div v-if="!$fetchState.pending" class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
        <div class="flex-1 min-w-0 bg-white xl:flex">
          <Sidebar :navigation="navigation" />

          <div class="bg-white lg:min-w-0 lg:flex-1"> <!-- <Parent container /> -->
            <CategoryHeader :category="navigation.categories[0]"/>

            <div class="sm:p-6">
              <ProductGrid />
            </div>
          </div>
        </div>
      </div>
    </main>
  </div>
</template>

<script lang="ts">

...

export default {
  name: 'App',
  components: {
    Sidebar,
    NavBar,
    Header,
    CategoryHeader
  },
  data() {
    return {
      navigation: Navigation
    }
  },
  async fetch() {
      await this.fetchCategories()
      this.navigation = this.$store.getters.navigation
  },
  fetchOnServer: true,
  methods: {
      ...mapActions({ fetchCategories: 'fetchCategories'})
  }
}

Sidebar.vue:

<template>
    <!-- This example requires Tailwind CSS v2.0+ -->
    <div class="xl:flex-shrink-0 xl:w-64 border-r border-gray-200 pt-5 pb-4 bg-white overflow-y-auto ">
        <h3 class="text-xl font-bold text-gray-800">{{ navigation.heading }}</h3>
        <div class="mt-5 flex-grow flex flex-col">
            <nav class="flex-1 px-2 space-y-1 bg-white" aria-label="Sidebar">
                <div v-for="(category, index) in navigation.categories" :key="index">
                    <SidebarItem v-if="!category.subcategories.length" :category="category"/>

                    <SidebarSection v-else-if="category.subcategories.length" @click="toggleExpansion(index)" :category="category"/>
                </div>
            </nav>
        </div>
    </div>
</template>

<script lang="ts">

...

export default {
    name: 'Sidebar',
    props: {
        navigation: {
            type: Navigation,
            required: true
        }
    }
}
</script>

SidebarItem.vue:

<template>
    <div>
        <!-- Current: "bg-gray-100 text-gray-900", Default: "bg-white text-gray-600 hover:bg-gray-50 hover:text-gray-900" -->
        <a href="#" class="bg-gray-100 text-gray-900 group w-full flex items-center pl-2 pr-2 py-2 text-sm font-medium rounded-md">
        {{ category.name }}
        </a>
    </div>
</template>

<script lang="ts">
import Category from '@/types/category'

export default {
    name: 'SidebarItem',
    props: {
        category: {
            type: Category,
            required: true
        }
    }
}
</script>

SidebarSection.vue그리고CategoryHeader.vue소품 등의 면에서 거의 동일하다.

비 POJO 경고 정보:

나는 클래스 객체를 POJO로 변환하는 문제를 해결했다.toJSON()함수(함수)devalue도서관 전화).예를 들면 다음과 같다.

class User {
  toJSON () {
    return { ...this } // here I make a POJO's copy of the class instance
  }
}

경고를 해결하는 것도 이치에 맞는 해결책이다.

개체 유형 문제: Vuex 스토어 탐색 게이터에서 개체를 가져오므로 이 시점(게터)에서는 강제로navigation.categories답례로Category[]

참조URL: https://stackoverflow.com/questions/65512526/cannot-stringify-arbitrary-non-pojos-and-invalid-prop-type-check-failed-for