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:
ShowGreetingsComponentwill just display the greetings messageChangeGreetingsComponentwill 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...