Vue/Vuex - 如何从孙辈那里检索数据答案

【问题标题】：Vue/Vuex - How to retrieve data from grandchildrenVue/Vuex - 如何从孙辈那里检索数据
【发布时间】：2019-09-14 15:25:47
【问题描述】：

第一次接触 VueJs 昨天，现在我被卡住了..

我有一个父组件，其中包含子项，其中也有一个子项（我称它们为孙子项）。当我单击父级中的按钮时，我想从所有孙子中获取数据，但我不知道如何。

在我看来，我想从父级向所有孙辈调用一个事件，他们应该将数据存储到 vuex 存储中。这有可能以某种方式还是有其他方法可以做到这一点？

// Data
blocks = [
    {
        id: 1,
        type: 'HeadingBlock',
        title: 'Hello',
        color: 'blue'
    },
    {
        id: 2,
        type: 'ImageBlock',
        image_id: 2
    }
];


// App.js

<ContentBlocks :blocks="blocks" / >

// ContentBlock.vue

<ContentBlockItem v-for="(block, index) in blocks" :component="block.type" ... />

// ContentBlockItem.vue

<component :is="component" :block="block" /> // Grandchild

// component aka the grandchild (eg. HeadingBlock.vue)

data() {
  return {
    title: 'Hello - I want save the changed data for this heading',
    color: 'blue'
  }
}

因此，唯一的号召性用语是通过“保存”按钮在父级中进行的。而且我希望孙辈的逻辑尽可能少（以便于创建新的逻辑，例如“ParagraphBlock”）。

提前谢谢

【问题讨论】：

好吧，在这种情况下，您可以调用一个动作来存储和执行您的任务，并与所有组件（父+子+孙子）共享状态。
我建议你阅读 vuex。 Vuex 专为解决此类问题而设计。

标签： javascript vue.js vuex

【解决方案1】：

您的所有组件都订阅emit() 一个全局Event 是可能的——但这似乎相当不切实际。（例如 this.$root.emit('saveData') 在父母中；在所有孩子中收听：this.$root.on('saveData')）

一种更实用的方法是首先将所有组件数据存储在store 中。并让每个组件从存储中检索其状态。（例如，在计算属性中：title() { return this.$store.myComponent.title }。

这里的诀窍显然是正确设置所有存储数据（例如，使用 componentID 正确匹配它）。为此，您需要注意，vuex 不支持maps 或sets。此外，您必须单独设置每个属性/元素 - 您不能一次性设置嵌套结构，而是必须递归地进行。因此Arrays 必须用原生数组方法 (push(), splice()) 填充，Object 属性必须用Vue.set(object, key, value) 设置。

【讨论】：

【解决方案2】：

要在父组件和子组件之间访问数据，您可以使用 vue 的最佳功能之一是 vuex 存储。当您想要将数据传递给子组件并在子组件中更新该数据并再次传递回父组件而不使用道具和事件发射时，这真的很有帮助。

这是您的网络应用程序可以访问的链接

https://medium.com/dailyjs/mastering-vuex-zero-to-hero-e0ca1f421d45

https://medium.com/vue-mastery/vuex-explained-visually-f17c8c76d6c4

希望对你有帮助。

【讨论】：