Vue / Vuex-如何从子孙中检索数据

Question

started with VueJs for the first time yesterday and now I'm stuck..

I have a parent component who has child items that also has a child inside them (I call them grandchildren). I want to fetch data from all the grandchildren when i click a button in the parent but i can't figure out how.

In my mind a want to call an event from parent to to all the grandchildrens that they should store their data to vuex store. Is this possible somehow or is there another way to do this?

// 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'
  }
}

So, the only call to action happens in the parent by a "save"-button. And i want as little logic in grandchildren as possible (to make it easy to create new ones, like a "ParagraphBlock").

Thx in advance

Answer 1

It is possible to emit() a global Event that all your components subscribe to - however it seems rather impractical. (eg this.$root.emit('saveData') in parent; in all children to listen to it: this.$root.on('saveData') )

A more practical approach is to store all your component data in the store in the first place. And have each component retrieve its state from the store. (eg in a computed property: title() { return this.$store.myComponent.title } .

The trick here is obviously to set all your store-data correctly (eg with componentIDs to match it correctly). To do this you need to be aware, that vuex does not support maps or sets . Also, you have to set each property/element individually - you cannot set nested structures in one go bu thave to do it recursively. Hereby Arrays have to be filled with native array methods ( push(), splice() ) and Object properties have to be set with Vue.set(object, key, value) .

Answer 2

For accessing data between parent and child component you can use one of the best features of vue is vuex store. It's really helpful when you want to pass data to child component and update that data in child and again pass back to parent without the use of props and event emit.

Here is a link you can follow for your web application

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

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

I hope this will help you.