A Pen by Brandon Lee on CodePen.
-
-
Save illepic/af19a418a0b44a4fdbb0cbaed83be954 to your computer and use it in GitHub Desktop.
jaPbeN
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
<html> | |
<body> | |
<div id="app"> | |
<div> | |
{{ notes }} | |
</div> | |
<button @click='increase'>Increase</button> | |
<button @click='decrease'>Decrease</button> | |
</div> | |
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.2/vue.js" ></script> | |
<script src="https://cdnjs.cloudflare.com/ajax/libs/vuex/2.5.0/vuex.js" ></script> | |
<script> | |
var vstore = new Vuex.Store({ | |
state: { | |
notes: 1 | |
}, | |
actions: { | |
increase: function actions(vueStuff, payload) { | |
vueStuff.commit('increase', payload) | |
}, | |
decrease: function decrease(vueStuff, payload) { | |
vueStuff.commit('decrease', payload) | |
}, | |
}, | |
mutations: { | |
increase: function increase(state, payload) { | |
state.notes += payload | |
}, | |
decrease: function decrease(state, payload) { | |
state.notes -= payload | |
} | |
}, | |
getters: { | |
notes: function notes(state) { | |
return state.notes | |
} | |
} | |
}); | |
/* ------------------------------------------ */ | |
/* Vuex */ | |
var vm = new Vue({ | |
el: '#app', | |
store: vstore, | |
computed: { | |
notes: function notes() { | |
return this.$store.getters.notes; | |
} | |
}, | |
methods: { | |
increase: function increase() { | |
this.$store.dispatch('increase', 1) | |
}, | |
decrease: function decrease() { | |
this.$store.dispatch('decrease', 1) | |
} | |
} | |
}); | |
</script> | |
</body> | |
</html> |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment