Greetings with store

We will create a very simple Vue application with two components: one of them will contain the greetings message and the other one will contain input that will allow us to change this message. Our store will contain the initial state that will represent the initial greeting and the mutation that will be able to change the message. Let's start by creating a Vue application. We will use vue-cli and the webpack-simple template:

vue init webpack-simple simple-store

Install the dependencies and run the application as follows:

cd simple-store npm install npm run dev

The application is started! Open the browser in localhost:8080. Actually, the greeting is already there. Let's now add the necessary components:

• ShowGreetingsComponent will just display the greetings message
• ChangeGreetingsComponent will display the input field that will allow to change the message

In the src folder, create a components subfolder. Start by adding ShowGreetingsComponent.vue to this folder.

It will look...