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',
})
JavaScript
๋ณต์ฌ