Full-Stack Web Development with Vue.js and Node

(singke) #1
Introducing Vuex Chapter 8

],
}),
methods: {
submit() {
if (this.$refs.form.validate()) {
const movie = {
name: this.name,
description: this.description,
release_year: this.release_year,
genre: this.genre,
}
this.$store.dispatch("addMovie", movie);
this.$refs.form.reset();
this.$router.push({ name: 'Home' });
}
return true;
},
clear() {
this.$refs.form.reset();
},
},
};
</script>

Then, add the action and mutations 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: []
},
getters: {
fetchMovies: state => state.movies,
},
mutations: {
ADD_MOVIE: (state, payload) => {
state.movies.unshift(payload);
},
MOVIES: (state, payload) => {
state.movies = payload;
}
},
actions: {
Free download pdf