title: Multiple API calls to initialize JSON and use that JSON throughout the system
body: <p>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<a href="https://i.stack.imgur.com/ubAOT.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/ubAOT.png" alt="enter image description here" /></a></p>
  <p>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.</p>
  <p>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.</p>
  <p>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?</p>
  <p>Looking forward for positive responses.</p>