muntadas-app/src/store/modules/projects.js

import { REST } from 'api/rest-axios'

export default {
  namespaced: true,

  // initial state
  state: {
    projects: []
  },

  // getters
  getters: {},

  // mutations
  mutations: {
    setProjects (state, projects) {
      // record the retrieved data
      state.projects = projects

      // randomly define building sizes
      let totalW = 0
      for (var i = 0; i < state.projects.length; i++) {
        let w = Math.round(21 + Math.random() * 15)
        totalW += w
        state.projects[i].size = {
          x: w,
          y: Math.round(100 + Math.random() * 250),
          z: Math.round(10 + Math.random() * 30)
        }
      }

      // positioning buildings on x regarding the widths
      let margin = 5
      totalW += margin * (state.projects.length - 1)
      for (var j = 0; j < state.projects.length; j++) {
        let x = -1 * totalW / 2// + state.projects[0].size.x / 2
        for (var k = 0; k < j; k++) {
          x += state.projects[k].size.x
        }
        x += margin * j
        x += state.projects[j].size.x / 2
        state.projects[j].position = {
          x: x
        }
      }
    }
  },

  // actions
  actions: {
    // async get authors
    getProjects ({ dispatch, commit, state }) {
      REST.get(`projects`, {})
        .then(({ data }) => {
          console.log('projects getProjects REST: data', data)
          commit('setProjects', data)
        })
        .catch((error) => {
          console.warn('Issue with getProjects', error)
          Promise.reject(error)
        })
    }
  }

}