Full-Stack Web Development with Vue.js and Node

(singke) #1
Introducing Vuex Chapter 8

addMovie: (context, payload) => {
return axios({
method: 'post',
data: payload,
url: '/movies',
headers: {
'Content-Type': 'application/json',
},
})
.then((response) => {
context.commit("ADD_MOVIE", response.data)
this.$swal(
'Great!',
'Movie added successfully!',
'success',
);
})
.catch(() => {
this.$swal(
'Oh oo!',
'Could not add the movie!',
'error',
);
});
},
fetchMovies: (context, payload) => {
axios({
method: 'get',
url: '/movies',
})
.then((response) => {
context.commit("MOVIES", response.data.movies);
})
.catch(() => {
});
}
}
})

Finally, run the following command to build our static files for Vue components:


$ npm run build

Now, when we log in and add a movie with the admin user, the movie should be added to
the database and also be listed on the home page.

Free download pdf