Installing and using Vuex in a movie application

We covered the basics of Vuex—how it works in an application and the core concepts. We covered how to create a store and mutations and how to use actions to dispatch them, and also discussed how to use getters to fetch information from the store.

We built an application in the previous chapters for a movie listing page. We will use the same application for Vuex. We will be doing the following actions:

• We will define a store where all the movies will be stored
• When a new movie is added, we will automatically display that to the movie listing page without reloading the page

Let's open the application and run the frontend and backend servers:

$ cd movie_rating_app
$ npm run build
$ nodemon server.js

Also, run the mongo server with the following command:

$ mongod

The movie listing page should look like this:

Let's...