Skip to content

Instantly share code, notes, and snippets.

@bleeDev

bleeDev/index.html

Last active October 31, 2017 15:38
Show Gist options
  • Save bleeDev/24a087a77c4128f76f72e53e14032dc7 to your computer and use it in GitHub Desktop.
Save bleeDev/24a087a77c4128f76f72e53e14032dc7 to your computer and use it in GitHub Desktop.
Download ZIP
jaPbeN
Raw
index.html
<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 src="https://cdn.jsdelivr.net/npm/es6-promise@4/dist/es6-promise.auto.min.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