0
157
ViewsMultiple API calls to initialize JSON and use that JSON throughout the system
I am working on a project, that is being implemented using Vue.js and Laravel. Basically the project is related to academia. It has units, lessons and activities. These are all related. Means Units have multiple lessons and lessons have multiple activities.
I want to get access to data of all the units, lessons and activities at one place, may be at local storage or at some file. Reason is that, user can move back and forth to activities.
So, I have designed a JSON, as shown in the attached picture
So, I want to use the most optimized way to work with this structure. For example there are 10 units, each unit with 3 lessons, each lesson with 5 activitie; we need to get all the units, lessons and activities data from database, which is MySQL.
Now, lets come to front-end navigation. There is a page which shows all Rooms. When click on any rooms, the lessons of that room will be displayed on Lesson page. And when click on any Lesson, a drop down bar opens showing all the activities of that lesson.
Now, what would you suggest to get data from the database and create the JSON as shown in the attached image? And should I store all data at local-storage or some file, so that system doesn't send call to APIs each time, it checks if local storage contains data, then use it, otherwise call APIs to fill up the data and use Vuex to maintain the state?
Looking forward for positive responses.
1 answers
Answer question0
Is your app used by many users at the same time? How will you handle new lessons added by other users? I think you misunderstood the main concept of vuex, which is to have a centralized store to keep the state through the whole app. IMO, there are 2 ways to face this:
Fetch your data from DB all the time with no need for vuex. I don't see any complexity to avoid fetching data from DB as many times as you need. In this way, if any other user adds/deletes/updates a lesson/activity/unit you will be sure that you are seeing everything up-to-date.
Using vuex + Websockets. Implementing vuex + WebSockets gives a really nice user experience. You can fetch all data when the app mounts, and then listen for WebSocket events so you can hydrate your vuex state. This way is a little more complex since you have to maintain a WebSocket server.
In addition, keeping your data within your localStorage seems insecure to me. You could manipulate what is stored and send whatever you want to your API.
Saying that I would ask myself:
- Do I need to keep my data through the whole app?
- Can any other user add/update/delete anything that I need to know?
- Are queries really complex to impact my app performance?