Initialize vuejs app

Question

I'm very new to vuejs world and I'm trying to move my existing application to vuejs.

I use Laravel as a backend framework. I got a lot of entities and settings, and in order to the app to work properly I need to retrieve from server some necessary data like user role etc. So basically I need to:

Hide the whole app and show a loader instead
Make few ajax requests in order to retrieve data from server
Store the data somewhere, so that it's accessible everywhere in vuejs app
Hide loader and run the app

The data might be changed though, for example, I have a team and team members. The list of team members used in many places. So if I add a team member the team member list should be updated as well.

So I don't want to have a global javascript variable for storing such data, because any modifications in this variable should affect the data-binding and stuff.

How could I achieve this?

Thanks

If I were you, I would build one or two playground projects in Vue before attempting to move an existing application (moving an existing app to another framework can be an exhausting and confusing piece of work if you already know the target framework, let alone if you don't...) — Jivan
– Jivan, Commented Jun 9, 2016 at 7:59
Oh this is just an experiment, I took existing project just in order to play with vue. Don't like dealing with "todo apps" because they don't arise real questions of how do to real things — Victor
– Victor, Commented Jun 9, 2016 at 8:02
Fair point - just wanted to warn against the rabbit-hole effect of switching an entire app to a new framework - if it's just for learning purposes then, no danger at all :) — Jivan
– Jivan, Commented Jun 9, 2016 at 8:08

Jivan · Accepted Answer · 2016-06-09 08:02:42Z

2

Your use case seems appropriate to using Vuex.

From Vuex documentation:

Vuex is an application architecture for centralized state management in Vue.js applications. It is inspired by Flux and Redux, but with simplified concepts and an implementation that is designed specifically to take advantage of Vue.js' reactivity system.

In other words, it is specifically designed to handle situations such as:

The data might be changed though, for example, I have a team and team members. The list of team members used in many places. So if I add a team member the team member list should be updated as well.

answered Jun 9, 2016 at 8:02

Jivan

23.4k17 gold badges92 silver badges144 bronze badges

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

Collectives™ on Stack Overflow

Initialize vuejs app

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