Create Vehicle page layout

store/vehicles/index.js

@@ -25,7 +25,9 @@ export const actions = {
   },
   async getVehicle({ commit }, id) {
     try {
-      const vehicle = await this.$axios.$get(`/api/vehicles/${id}`);
+      const vehicle = await this.$axios.$get(
+        `/api/vehicles/${id}?fields=id,name,description,vehicle_class,length,pilot,films`
+      );
       commit("setVehicle", vehicle);
     } catch (e) {
       throw Error(`API Error occurred: ${e.message}`);
@@ -38,5 +40,15 @@ export const getters = {
   vehicle: state => state.vehicle,
   getVehiclesByFilmId: state => id => {
     return state.list.filter(vehicle => vehicle.films.split("/")[4] === id);
+  },
+  getPilot: (state, getters, rootState) => {
+    return rootState.people.list.find(
+      people => people.id === state.vehicle.pilot.split("/")[4]
+    );
+  },
+  getFilm: (state, getters, rootState) => {
+    return rootState.films.list.find(
+      film => film.id === state.vehicle.films.split("/")[4]
+    );
   }
 };