Frontend State Management with Vue and Vuex : Connecting the news component to Vuex store

Connecting the news component to Vuex store


Below the news component. In the created lifecycle hook of the component, we use Vuex helpers mapActions and  mapState to retrieve and access our news module functionality here in out component.  Some utilities for formatting out data in the templates are also imported. 

  <div class="row">
    <div v-bind:key="article.title" v-for="article in newsArticles" class="post col-xl-6">
      <div class="post-thumbnail">
        <a :href="article.url" class="animsition-link">
          <img :src="article.urlToImage" alt="..." class="img-fluid" />
      <div class="post-details">
        <div class="date meta-last">{{ formatDate(article.publishedAt) }}</div>
      <a :href="article.url" class="animsition-link">
        <h3 class="h4 w-100">{{ article.title }}</h3>
      <p class="text-muted">{{ article.description }}</p>
      <footer class="post-footer d-flex align-items-center">
        <a href="#" class="author d-flex align-items-center flex-wrap">
          <div class="title">{{ }}</div>

import { mapActions, mapState } from "vuex";
import { getFormattedDateTime } from "../helpers/date-helper";

export default {
  name: "NewsBySource",
  props: ["category"],
  data() {
    return {
      msg: "Welcome to Your Vue.js App",
  created() {
  computed: {
      newsArticles: function ({ currentNews }) {
        return currentNews.newsArticles[this.$props.category];
  methods: {
    formatDate: getFormattedDateTime,

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped></style>



course logo
Frontend State Management with Vue and Vuex
Number of sections:
Content length:
Delivery formats:


F Yeboah
I am a Software / UI developer with interests in Search Intensive applications, Information Architectures(IA), UX/UI, FRP, and Reusable Frontend Components Design.... Show more