const store = new Vuex.Store({
state: {
count: 0
},
mutations: {
incrementCountMutation (state, payload) {
state.count += payload
}
},
getters: {
count (state){
return state.count
}
},
actions: {
incrementCount: ({commit}, payload) => {
setTimeout(() => {commit('incrementCountMutation', 100)}, payload)
}
}
})
...
<h1>Count is {{ store.getters.count }}</h1>
Let's create a simple store and see how all this works in action. (using vuex)
export const useCounterStore = defineStore("counter", {
state: () => {
return { count: 0 };
},
getters: {
count: (state) => {
return state.count;
},
},
actions: {
incrementCount(payload) {
this.count += value;
},
},
});
...
<h1>Count is {{ store.count }}</h1>
import { defineStore } from "pinia";
export const useCounterStore = defineStore("counter", {
state: () => {
return { count: 0 };
},
actions: {
increment(value = 1) {
this.count += value;
},
},
getters: {
doubleCount: (state) => {
return state.count * 2;
},
doublePlusOne() {
return this.doubleCount + 1
},
},
});