Vue && Vuex

by Max Sinev

HTML

<script src="https://unpkg.com/vue"></script>
<script src="https://unpkg.com/vuex"></script>
<script src="https://unpkg.com/axios/dist/axios.min.js"></script>
<div id="app">
  <button @click="error">Error</button>
  <button @click="correct">Correct</button>
  {{ someLocal }}
</div>

JavaScript

const store = new Vuex.Store({
	state: {
  	some: 0
  },
  getters: {
  	someGetter: (state) => {
    	if (state.some === 50) {
      	throw new Error("123");
      } else {
      	return state.some;
      }
    } 
  },
  mutations: {
  	setSome(state, value) {
    	state.some = value;
    }
  }
  
})

const app = new Vue({
	store,
  el: '#app',
  computed: {
  	someLocal() {
    	return this.$store.getters.someGetter;
    }
  },
  methods: {
  	error() {
      this.$store.commit('setSome', 50)
    },
    correct() {
      this.$store.commit('setSome', Math.floor(Math.random() * 41))
    }
    
  },
  watch: {
  	someLocal()  {
    	console.log(this.someLocal);
    }
  }
})