"无法字符串化任意非POJO"和"无效道具:道具的类型检查失败"警告

Question

在我的项目中，我正在从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

根据这一讨论，在当前版本的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在道具等方面几乎相同。

Answer 1

关于非POJO的警告：

我在toJSON()函数(即devalue库调用的函数(处解决了将类对象转换为POJO的问题。例如：

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

这是一个明确的解决方案，解决警告也是有意义的。

关于对象类型的问题：您从Vuex商店导航getter中获得object，因此此时(getter(您可以强制navigation.categories返回Category[]