Full-Stack Web Development with Vue.js and Node

(singke) #1
Introducing Vuex Chapter 8

})
.then((response) => {
context.commit("MOVIES", response.data.movies);
})
.catch(() => {
});
}
}
})

The preceding mutations mutate the state of the movies of the application.


We now have the action and the mutation. Now, the last part is to add a getter


method, which gets the value of the movies from the state.


Creating a getter


Let's add the getter method in store.js that we created to manage the state of our


application:


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: {
MOVIES: (state, payload) => {
state.movies = payload;
}
},
actions: {
fetchMovies: (context, payload) => {
axios({
method: 'get',
url: '/movies',
})
.then((response) => {
Free download pdf