Vue 2.0 Hello World

Open the dev tools console and click the "Produce error" button. You'll see the bug's error in the console logs.

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/vuex/3.5.1/vuex.min.js"></script>
<script src="https://unpkg.com/vue"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/vuex/3.5.1/vuex.min.js"></script>

<div id="app">
  <p>{{ message }}</p>
  <p>
    Root value: {{ rootValue }}
  </p>
  <p>
    Has first module? {{ hasFirstModule }}
  </p>
  <p>
    First value: {{ firstValue }}
  </p>
  
  <button @click="produceError">
    Produce error
  </button>
</div>

JavaScript

const store = new Vuex.Store({
  state: {
    value: 'root'
  }
});

store.registerModule(['first'], {
	namespaced: true,
  state() {
  	return {
	  	value: 'first'
    };
  }
});

new Vue({
  el: '#app',
  store,
  data: {
    message: 'Hello Vue.js!'
  },
  computed: {
  	hasFirstModule() {
    	return this.$store.hasModule(['first']);
    },
  	rootValue() {
    	return this.$store.state.value;
    },
  	...Vuex.mapState('first', {
    	firstValue: (state) => state.value
    })
  },
  methods: {
  	produceError() {
    	return this.$store.hasModule(['second', 'third'])
    }
  }
});