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 can put the name into the browser's local storage so that it can be recovered between page refreshes. However, this would introduce an unnecessary burden, as we will have to manage the local storage. We will also need to clean the user's name after logging out and plug the local storage into the Vuex store. This makes the code more complex than it needs to be.

The second way, which is much simpler and more effective, is to get all three of these pieces of data in one request that will be sent to the server during page initialization. So, from where should we trigger this request? From HomePage.vue, PageHeader.vue or somewhere else?

Before answering that, let's think about the data structure. What is the data structure that HomePage.vue and PageHeader.vue require?

For the user's name, this is straightforward. In PageHeader.vue, we need something like this:

{
  "user": {
    "name": "Sunny Hu"
  }
}

For the teams and boards data, we can have the personal boards and the team boards together and then use a computed property to get the personal boards to populate the first .boards-section element at the top, as personal boards will always be placed at the top. And we will need another computed property to get the teams and related boards to populate a list of .boards-section elements. If we do it this way, we will have duplicated code for extracting different types of boards in HomePage.vue and PageHeader.vue.

It would be much easier and more straightforward to use a data structure like the following in HomePage.vue and PageHeader.vue:

{
  "personalBoards": [{
    "id": 1,
    "name": "vuejs.spring-boot.mysql",
    "description": "An implementation of TaskAgile application with 
    Vue.js, Spring Boot, and MySQL"
  }],
  "teams": [{
    "id": 1,
    "name": "Sales & Marketing",
    "boards": [{
      "id": 2,
      "name": "2018 Planning",
      "description": "2018 sales and marketing plan"
    }, {
      "id": 3,
      "name": "Ongoing Campaigns",
      "description": "2018 ongoing marketing campaigns"
    }]
  }]
}

How about the structure of the data that we put into the Vuex store? For the user's name, it will be the same structure as the one mentioned before. For teams and boards, it would be better that we keep team and board data in two separate arrays, as follows:

{
  "boards": [{
    "id": 1,
    "name": "vuejs.spring-boot.mysql",
    "description": "An implementation of TaskAgile application with 
    Vue.js, Spring Boot, and MySQL",
    "teamId": 0
  }, {
    "id": 2,
    "name": "2018 Planning",
    "description": "2018 sales and marketing plan",
    "teamId": 1
  }, {
    "id": 3,
    "name": "Ongoing Campaigns",
    "description": "2018 ongoing marketing campaigns",
    "teamId": 1
  }],
  "teams": [{
    "id": 1,
    "name": "Sales & Marketing"
  }]
}

As you can see, the link between "boards" and "teams" is the teamId property. This structure is very similar to how the teams and boards are kept in the database on the server side. We will need to convert this data structure into the one needed by HomePage.vue and PageHeader.vue. In Vuex, we have a perfect place for this conversion—getters. Vuex allows us to define getters in the store, similar to the computed properties in a Vue instance. The result of a getter is cached based on its dependencies. Once the dependencies have changed, Vuex will re-evaluate the getter and update others that depend on it automatically. We will see how that works later in this chapter.