Building Applications with Spring 5 and Vue.js 2

Data structure and state management

Before writing the frontend code, let's think about the structure of the data that is required on the home page and what data we will need to put into Vuex.

After going through the UI of the home page, we can see that we need the following three pieces of data to initialize the home page:

• Name of logged in user
• Teams the user has joined
• Boards the user has access

There are two ways to get a user's name. The first one is to add it into the login response so that once a user is logged in, we can get the name and keep it in the Vuex store. There is an issue with this approach. Since the Vuex store will be initialized after a page refresh, the user's name will be lost after refreshing. It is true that we ...