<script> export default { data() { return {

1.	<script> export default { data() { return { author: { name: 'John Doe', books: [ 'Vue 2 - Advanced Guide', 'Vue 3 - Basic Guide', 'Vue 4 - The Mystery' ] } } }, computed: { publishedBooksMessage() { return this.author.books.length > 0 ? 'Yes' : 'No' } } } </script> <template> <p>Has published books:</p> <span>{{ publishedBooksMessage }}</span> </template>
Answer» The state is an important part of Vue applications SINCE it is concerned with how data is passed among components. State management - is putting all the shared states of components in one place so that there will only be a single source of truth. This helps in achieving consistency of the state between all components making use of it. Generally, state management is all about accessing, centralizing, and saving the state of the whole application in a structured and organized way rather than passing it from one to another component. There are state management libraries like vuex or one can create his own STORE and make it a single source of truth where every component using the state has access to the properties as well as the actions. Prop drilling - props are used to pass data from PARENT to child. The use of props is EFFECTIVE until deep chaining of components is encountered. This is when a distant component in a large component tree and a deeply nested component want something from a distant ancestor component. In this case, all of the intermediate components should have to pass props from the distant ancestor across the entire CHAIN. State management is better: As there is no passing of pross along the entire chain for the distant component to use the data. Since it is easier to maintain, less prone to bugs, and easier to work with.

<script> export default { data() { return { author: { name: 'John Doe', books: [ 'Vue 2 - Advanced Guide', 'Vue 3 - Basic Guide', 'Vue 4 - The Mystery' ] } } }, computed: { publishedBooksMessage() { return this.author.books.length > 0 ? 'Yes' : 'No' } } } </script> <template> <p>Has published books:</p> <span>{{ publishedBooksMessage }}</span> </template>

Answer»

The state is an important part of Vue applications SINCE it is concerned with how data is passed among components.

State management - is putting all the shared states of components in one place so that there will only be a single source of truth. This helps in achieving consistency of the state between all components making use of it. Generally, state management is all about accessing, centralizing, and saving the state of the whole application in a structured and organized way rather than passing it from one to another component. There are state management libraries like vuex or one can create his own STORE and make it a single source of truth where every component using the state has access to the properties as well as the actions.
Prop drilling - props are used to pass data from PARENT to child. The use of props is EFFECTIVE until deep chaining of components is encountered. This is when a distant component in a large component tree and a deeply nested component want something from a distant ancestor component. In this case, all of the intermediate components should have to pass props from the distant ancestor across the entire CHAIN.

State management is better:

As there is no passing of pross along the entire chain for the distant component to use the data.
Since it is easier to maintain, less prone to bugs, and easier to work with.

Discussion

No Comment Found

Related InterviewSolutions

Reply to Comment