Full-Stack Web Development with Vue.js and Node

Introducing Vuex Chapter 8

Modifying Home.vue

Let's start this section by modifying our Home.vue component. Update the script part of

the file with the following lines of code:

<script>

export default {

name: 'Movies',

computed: {

movies() {

return this.$store.getters.fetchMovies;

}

},

mounted() {

this.$store.dispatch("fetchMovies");

},

};

</script>

In the preceding code, in the mounted() method, we have dispatched an action called

fetchMovies, which we will define in our action.

When the movies are fetched successfully, we will use the computed method, which will be

mapped to the movies variable, which we will use in our template:

<template>

<v-layout row wrap>

<v-flex xs4 v-for="movie in movies" :key="movie._id">

<v-card>

<v-card-title primary-title>

Creating an action

Let's move on to add an action to the store.js file:

import Vue from 'vue';

import Vuex from 'vuex';

import axios from 'axios';

Vue.use(Vuex);

export const store = new Vuex.Store({

state: {

movies: []