How do we create a simple counter with Vue Js and Vuex?

The answer is simple

Samanja Cartagena, Vue Js, Vuex
A simple counter
npm i vuex@next
import {createStore} from 'vuex';
const store=createStore({
state:{},
getters:{},
actions:{},
mutations:{}
})
export default store
import {createStore} from 'vuex';
const store=createStore({
state:{
count:0
},
getters:{},
actions:{},
mutations:{}
})
export default store
<template>
<div>
<center>
<h1>{{count}}</h1>
</center>
</div>
</template>
<script>
export default {
name: 'App',
components: {
},
computed:{
count(){
return this.$store.state.count;
}
},
}
</script>
<style>
</style>
actions:{  
changeCount({commit},payload){
return (commit('changeCount', payload))
}
},
mutations:{  
changeCount(state,payload){
return state.count += payload
},
<template>
<div>
<center>
<h1>{{count}}</h1>
</center>
</div>
</template>
<script>
export default {
name: 'App',
components: {
},
computed:{
count(){
return this.$store.getters.count;
}
},
}
</script>
<style>
</style>
<template>
<div>
<center>
<h1>{{count}}</h1>
<button @click="increment">Increment</button>
</center>
</div>
</template>
<script>
export default {
name: 'App',
components: { },
computed:{
count(){
return this.$store.getters.getCount; } },
methods:{
increment(){
this.$store.dispatch('changeCount',1) },
}
</script>
<style></style>
methods:{  
increment(){
this.$store.dispatch('changeCount',2) },
}
import {createStore} from 'vuex'; 
const store= createStore({
state:{
count:0
},
getters:{
getCount(state){
return state.count;
}
},
actions:{
async changeCount({commit},payload){
return Promise.resolve(commit('changeCount', payload)) },
async reset({commit}){
return Promise.resolve(commit('reset'))
}
},
mutations:{
changeCount(state,payload){
return state.count += payload },
reset(state){
return state.count = 0; } },
export default store
<template>  
<div>
<center> <h1>{{count}}</h1>
<button @click="increment">Increment</button>
<button @click="reset">Reset</button>
</center> </div>
</template>
<script>
export default {
name: 'App',
components: { },
computed:{
count(){
return this.$store.getters.getCount;
}
},
methods:{
increment(){
this.$store.dispatch('changeCount',1)
},
reset(){
this.$store.dispatch('reset')
}
}}
</script>
<style></style>

--

--

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store