处理 Vue3js 中的意外突变属性

Question

我有一个 vue3 webapp，我用它来编辑一些多页文档。
所有页面都以pinia的状态存储。我的 pinia 状态是一个带有 pages 属性的对象，它是一个包含每个页面的所有数据的数组。

每个文档的每个页面都使用一个特定的模板，因此我创建了多个组件来处理每个模板，并且我还为一些可以在多个模板中找到的部分创建了子组件。
我使用根组件遍历页面，传递对页面对象的引用，就像这样：
<PageWrapper v-for="page in pages" :key="page.id" :page="page" />

然后，在 PageWrapper 组件内，我使用相应的页面模板组件，传递对页面对象的引用（如果有的话，与子组件相同）：

<PageFirst v-if="props.page.type === 'first'" :page="props.page" />
<PageServices v-if="props.page.type === 'services'" :page="props.page" />
<PageTotal v-if="props.page.type === 'total'" :page="props.page" />
<PageContent v-if="props.page.type === 'content'" :page="props.page" />

我想知道从子组件编辑我的 page 对象的属性的最佳方法是什么，因为我知道改变属性是一种不好的做法直接。
我必须使用事件吗？ PageWrapper 是捕捉所有事件和修改的好地方吗？

任何关于此事的建议都会对我有很大帮助。
非常感谢您的帮助！

Answer 1

正如 Vue official document 指出的那样：

In most cases, the child should emit an event to let the parent perform the mutation.

所以答案是你应该让 parent 完成改变道具的工作。而且它永远不会是一个糟糕的解决方案。

但是，看看你的设计。您的 parent 组件 PageWrapper 就像包装器一样工作。除了 child.

的容器外，它什么都不做

道具 one-way data flow 防止 child 组件意外改变 parent 的状态，这会使您的应用程序的数据流更难理解。但是如果 parent 实际上没有处理状态并且你的 child 组件的数据没有相互关联，那么改变 child 组件内的 props 将是 fine.

处理 Vue3js 中的意外突变属性

Handling unexpected mutations properties in Vue3js

vuejs3

pinia