vertcitron

/** Class to manage asset data model **/

export default class Asset {
  constructor (rawData = {}) {
    Vue.set(this, 'data', rawData)
  }

  get slot () {
    return name => {
      for (const slot of this.data.slots) {

vertcitron

/** VUEX module for image asset management **/

import Vue from 'vue'
import Asset from './assetClass.js'

export default {
  namespaced: true,
  // -----------------------------------------------------------------
  state: {
    asset: new Asset()

vertcitron

const asset = this.$store.getters['asset/asset']
const originalSlot = asset.slot('original')
originalSlot.public_url = 'some new url'
asset.setSlot(originalSlot)

vertcitron

/** Store module to handle movies lists **/

import Vue from 'vue'

export default {
  namespaced: true,
  // ----------------------------------------------------------------------------------
  state: {
    movies: []
  },

vertcitron

/** Store module to handle TMDb config **/

import Vue from 'vue'

export default {
  namespaced: true,
  // ----------------------------------------------------------------------------------
  state: {
    images: {}
  },

vertcitron

<template>
  <div class="movie">
    <h5>{{movie.title}}</h5>
    <img :src="posterUrl">
  </div>
</template>

<script>
export default {
  name: 'MovieCard',

vertcitron

/** Store module to handle movies lists **/

import Vue from 'vue'

export default {
  namespaced: true,
  // ----------------------------------------------------------------------------------
  state: {
    movies: []
  },

vertcitron

<template>
  <div class="movie">
    <h5>{{movie.title}}</h5>
    <img :src="$store.getters['movies/posterUrl'](movie.id)" onerror="this.src=''">
  </div>
</template>

<script>
export default {
  name: 'MovieCard',

vertcitron

/** Model definition file for the Movie Class **/

import store from '../store'

export default class Movie {
  constructor (rawData = {}) {
    this.id = rawData.id
    this.title = rawData.title
    this.poster_path = rawData.poster_path
  }

vertcitron

/** Store module to handle movies lists **/

import Vue from 'vue'
import Movie from '../models/MovieClass'

export default {
  namespaced: true,
  // ----------------------------------------------------------------------------------
  state: {
    movies: []