Basic Vuex example

<!DOCTYPE html>
<html>

<head>
    <link rel="stylesheet" href="style.css">
    <script src="script.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/vue@2.5.13/dist/vue.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/vuex/3.0.1/vuex.min.js"></script>
</head>

<body>
    <div id="main">
        <h1>{{title}}</h1>
        <hr/>
        <h2>Counter: {{counter}}</h2>
        <button type="button" @click="increment"> + </button>
        <button type="button" @click="decrement"> - </button>
    </div>
    <script>
        const store = new Vuex.Store({
            state: {
                counter: 0
            },
            getters: {
                counter: state => state.counter
            },
            mutations: {
                increment: state => state.counter++,
                decrement: state => state.counter--
            }
        })
        new Vue({
            el: '#main',
            store,
            data() {
                return {
                    title: 'Hello World!',
                }
            },
            computed: {
                counter() {return this.$store.getters.counter; }
            },
            methods: {
                ...Vuex.mapMutations(['increment', 'decrement'])
            }
        })
    </script>
</body>

</html>

// Code goes here

/* Styles go here */