VueJS Tutorial- #5 Component Relationships

by Andrey Bulezyuk | Nov 12, 2019 | Frontend

Welcome to another VueJS Tutorial. Let’s explore a very important topic in VueJS: the relationship between your Vue-Components. It’s crucial because everything is importing everything from everywhere anytime…or something like this.

For those who are new to VueJS Tutorial / VueJS Practice: we create a fictional problem / task for you to solve. To go through it and try and code a solution that would solve the issue. Then you compare it with the solution provided by German IT Academy.

Problem / Task

We need

• create DataSourceList.vue that reads from state ‚datasources‘ in vuex store.
• For every Entry in the ‚datasources‘ list, embed a a DataSourceItem.vue in the DataSourceList.vue.
• DataSourceItem Component receives the props ‚id‘ from the Parent. With that id the Child fetches all the data from ‚datasources‘ in vuex store and displays them.
• DataSourceItem Component receives a slot from the Parent and displays the content in a random place.

Hint

• When importing a Vue-Component, do not forget to also import it inside the Parent Instance
• As reminder, props are those data values that you pass to a child as a HTML Tag Attribute (:propName=data) and slot is the data between the HTML Opening and Closing tag.
• To create Vuex Getter that receives a parameter from the outside, read: https://vuex.vuejs.org/guide/getters.html

You can learn more about VueJS with our VueJS Course and get VueJS certified.

Solution

Source code:

import Vue from 'vue'
import Vuex from 'vuex'

Vue.use(Vuex)

export default new Vuex.Store({
  state: {
    datasources: [
      {
        id:0,
        name:'Google Cloud Storage',
        interface: 'REST API',
        activated: true
      },
      {
        id:1,
        name:'AWS S3 Bucket',
        interface: 'REST API',
        activated: true
      },
      {
        id:2,
        name:'On-Deman Server Storage',
        interface: 'SSH',
        activated: false
      }
    ]
  },
  getters: {
    getAllDataSources(state) {
      return state.datasources
    },
    getDataSourceById: (state) => (id) => {
      for (let i = 0; i < state.datasources.length; i++) {
        if (state.datasources[i].id == id) {
          return state.datasources[i]
        }
      }
    }
  },
  mutations: {
  },
  actions: {
  }
})

We have the list as a state variable. We have to getters: one for every DataSource and one getter that will return only the Entry with the specified id.

<template>
  <div class="DataSourceItem">
    <h2 :style="activated()"> 
      {{this.datasource.name}}
    </h2>
    <h3> {{datasource.interface}}</h3>
  </div>
</template>

<script>
export default {
  name: 'DataSourceItem',
  props: {
    id: Number
  },
  computed: {
    datasource: {
      get(){
        return this.$store.getters.getDataSourceById(this.id)
      }
    }
  },
  methods: {
    activated() {
      if (this.datasource.activated) {
        return 'background-color:green;'
      }
      return 'background-color:red;'
    }
  }
}
</script>

<style scoped>
h3 {
  margin: 40px 0 0;
}
ul {
  list-style-type: none;
  padding: 0;
}
li {
  display: inline-block;
  margin: 0 10px;
}
a {
  color: #42b983;
}
</style>

The DataSourceItem.vue receives the id as a props. With that id the Component will retrieve the DataSource from Vuex Store. It’ll use the Vuex getter that we’ll define below.

<template>
  <div class="home">
    <img 
      alt="German IT Academy"
      width="200"
      src="https://i0.wp.com/code.git-academy.com/wp-content/uploads/2019/10/400dpiLogo.jpg?zoom=1.100000023841858&fit=2077%2C1175&ssl=1">
    <div v-for="datasource in datasources" :key="datasource.id">  
      <DataSourceItem :id="datasource.id"/>
    </div>
  </div>
</template>

<script>
// @ is an alias to /src
import DataSourceItem from '@/components/DataSourceItem.vue'

export default {
  name: 'DataSourceList',
  components: {
    DataSourceItem
  },
  computed: {
    datasources: {
      get(){
        return this.$store.getters['getAllDataSources']
      }
    },
  }
}
</script>

German IT Academy hopes you learned something new with this VueJS Tutorial. You can learn more about VueJS with our VueJS Course and get VueJS certified.

The visual version of the solution looks like this.