Full-Stack Web Development with Vue.js and Node

Introducing Vuex Chapter 8

Check your package.json file; vuex should be listed on the dependencies:

"vue-router": "^3.0.1",

"vue-swal": "0.0.6",

"vue-template-compiler": "^2.5.14",

"vuetify": "^0.17.6",

"vuex": "^3.0.1"

},

Now, let's create a file, where we will be able to put all our getters, mutations, and

actions that we will define as we go forward.

Defining a store

Let's create a folder named store inside the src directory, and a new file called store.js

inside the store directory, and add the following lines of code to it:

import Vue from 'vue';

import Vuex from 'vuex';

import axios from 'axios';

Vue.use(Vuex);

export const store = new Vuex.Store({

})

Just like we did in the preceding sample application, let's add a state variable to store the

current state of the application for movies listing page.

In store.js, add the following lines of code:

import Vue from 'vue';

import Vuex from 'vuex';

import axios from 'axios';

Vue.use(Vuex);

export const store = new Vuex.Store({

state: {

movies: []

},

})