Watch multiple values and trigger update in Vuex

by SĂ©bastien Lorentz

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/vuex/2.3.1/vuex.js"></script>
<div id="app">
  <button id="emptySplice">Trigger empty splice</button>
  <button id="overwrite">Overwrite same data</button>
</div>

JavaScript

new Vue({
	el: '#app',
  data: function() {
  	return {
      someList: [1, 2, 3],
      someData: "foobar"
    };
  },
  mounted() {
  	document.getElementById("emptySplice").addEventListener("click", () => {
  		this.someList.splice(0, 0);
    });
  	document.getElementById("overwrite").addEventListener("click", () => {
  		Vue.set(this, "someData", "foobar");
    });
  },
  watch: {
  	someList() {
      console.log("someList triggered")
    },
  	sopeData() {
      console.log("someData triggered")
    }
  }
})