![dependabot[bot]](https://avatars.githubusercontent.com/in/29110?v=4&size=40){kind=avatar}
<template>
<div>
<h3>Counter App</h3>
<p>{{ counter }}</p>
<button @click="decrementCounterAction()"> - </button>
<button @click="incrementCounterAction()"> + </button>
</div>
</template>
<script>
import { mapGetters, mapActions } from 'vuex';
//
export default {
name: 'counter-component',
computed: mapGetters([
'counter',
]),
methods: mapActions([
'decrementCounterAction',
'incrementCounterAction',
]),
};
</script>// ...
import { state } from './state.js';
import { getters } from './getters.js';
import { mutations } from './mutations.js';
import { actions } from './actions.js';
// ...
const store = new Vuex.Store({
state,
getters,
mutations,
actions,
});
export default store;export const state = {
counter: 0,
};export const getters = {
counter: state => state.counter,
};export const actions = {
decrementCounterMutation: state => state.counter--,
incrementCounterMutation: state => state.counter++,
};export const actions = {
decrementCounterAction: ({ commit }) => commit('decrementCounterMutation'),
incrementCounterAction: ({ commit }) => commit('incrementCounterMutation'),
};yarn install
yarn dev
yarn build
yarn build --report
yarn deployFor detailed explanation on how things work, checkout the guide and docs for vue-loader.