Programmatically display data in vue components across different pages

Question

For my current project we have a single navbar.vue that is placed in a components folder. Then all our pages are listed under the layouts folder. Currently the vue app is ran by the main.js file that places the navbar on each page. Is it possible to have different data on each page that is shown in the navbar, but then these piece of information can also be treated as event clicks and toggle reactions on each page?

Steven Spungin · Accepted Answer · 2018-08-29 22:23:35Z

1

This is was vuex was made for.

Your shared application state resides in a store that manages reactivity between components.

https://vuex.vuejs.org/guide/

You would get your data from the $store in you navbar and components.

I like to view the refactoring of data in vue as such:

First data in, and private to, a component

Then props passed in from parent

Then events emitted from child to parent (child never mutates data passed in, so it sends events up instead)

Then $store/state from vuex to go beyond when this parent/child model starts to fall apart.

edited Aug 29, 2018 at 22:23

answered Aug 29, 2018 at 22:17

Steven Spungin

29.5k7 gold badges97 silver badges85 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

Programmatically display data in vue components across different pages

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related