Full-Stack Web Development with Vue.js and Node

Introducing Vuex Chapter 8

context.commit("MOVIES", response.data.movies);

})

.catch(() => {

});

}

}

})

That's it. When we navigate to http://localhost:8081/movies/add, we should have a

functional Vuex implementation that fetches the movies to the home page.

Let's move on to implement the store when we add a movie to the application. We will

follow the same process as we did earlier:

1. Modify AddMovie.vue to call the action to create the movie


2. Create an action that calls the POST API to create movies


3. Create a mutation to store the added new movie to the movies store

Replace the script contents in AddMovie.vue with the following code:

<script>

export default {

data: () => ({

movie: null,

valid: true,

name: '',

description: '',

genre: '',

release_year: '',

nameRules: [

v => !!v || 'Movie name is required',

],

genreRules: [

v => !!v || 'Movie genre year is required',

v => (v && v.length <= 80) || 'Genre must be less than equal to

80 characters.',

],

releaseRules: [

v => !!v || 'Movie release year is required',

],

select: null,

years: [

'2018',

'2017',

'2016',

'2015',