Full-Stack Web Development with Vue.js and Node

Introducing Vuex Chapter 8

This means that the initial state of the application will have an empty movie listing.

Now, we need to import this store into main.js so that it is accessible throughout the

components. Add the following lines of code in src/main.js:

// The Vue build version to load with the `import` command

// (runtime-only or standalone) has been set in webpack.base.conf with an

alias.

import 'bootstrap/dist/css/bootstrap.min.css';

import 'bootstrap-vue/dist/bootstrap-vue.css';

import BootstrapVue from 'bootstrap-vue';

import Vue from 'vue';

import Vuetify from 'vuetify';

import VueSwal from 'vue-swal';

import App from './App';

import router from './router';

import { store } from './store/store';

Vue.use(BootstrapVue);

Vue.use(Vuetify);

Vue.use(VueSwal);

Vue.config.productionTip = false;

/* eslint-disable no-new */

new Vue({

el: '#app',

store,

router,

components: { App },

template: '<App/>',

});

Now, we will need to fetch the movies when we open the

location http://localhost:8081/ in the browser. Here is what we will do:

1. Modify Home.vue to call the action that fetches the movies


2. Create an action that will fetch all the movies


3. Create a mutation to store the fetched movies in the movies store


4. Create a getter method to fetch the movies from the state to display on the home
   page