data {{ this.$data }}

Child A

data {{ this.$data }}

---

Change Score Score: {{ score }}

Child B

data {{ this.$data }}

---

Child A

data {{ this.$data }}

---

Change Score Score: {{ score }}

Child B

data {{ this.$data }}

---

Child A

data {{ this.$data }}

---

Change Score Score: {{ score }}

const store = new Vuex.Store({
  state: {
    score: 100
  },
  mutations: {
    incrementScore (state, payload) {
      state.score += payload
    }
  },
  getters: {
    score (state){
      return state.score
    }
  },
  actions: {
    incrementScoreAsync: ({commit}, payload) => {
      setTimeout(() => {
        commit('incrementScore', 100)
      }, payload)
    }
  }
})
 
Vue.component('ChildB',{
  template:`
    <div id="child-b">
      <h2>Child B</h2>
      <pre>data {{ this.$data }}</pre>
      <hr/>
    </div>`,
})
 
Vue.component('ChildA',{
  template:`
    <div id="child-a">
      <h2>Child A</h2>
      <pre>data {{ this.$data }}</pre>
      <hr/>
      <button @click="changeScore">Change Score</button>
      <span>Score: {{ score }}</span>
    </div>`,
  computed: {
    score () {
      return store.getters.score;
    }
  },
  methods: {
    changeScore (){
      store.commit('incrementScore', 100)
    }
  }
})
 
Vue.component('ParentB',{
  template:`
    <div id="parent-b">
      <h2>Parent B</h2>
      <pre>data {{ this.$data }}</pre>
      <hr/>
      <button @click="changeScore">Change Score</button>
      <span>Score: {{ score }}</span>
    </div>`,
  computed: {
    score () {
      return store.getters.score;
    }
  },
  methods: {
    changeScore (){
      store.dispatch('incrementScoreAsync', 3000);
    }
  }
})
 
Vue.component('ParentA',{
  template:`
    <div id="parent-a">
      <h2>Parent A</h2>
      <pre>data {{ this.$data }}</pre>
      <hr/>
      <child-a/>
      <child-b/>
    </div>`,
})
 
Vue.component('GrandParent',{
  template:`
    <div id="grandparent">
      <h2>Grand Parent</h2>
      <pre>data {{ this.$data }}</pre>
      <hr/>
      <parent-a/>
      <parent-b/>
    </div>`,
})
 
new Vue ({
  el: '#app',
})