Soy bastante nuevo con Vue y Vuex, así que solo estoy haciendo un contador simple para comprender los conceptos básicos de Vuex. El problema que tengo en este momento es que la función de incremento que se define en la Tienda de mutación no funciona en el componente Contador, y no entiendo por qué. Aquí está el código: tienda :

 import { createStore } from 'vuex' export default createStore({ state: { counterVal: 0, }, mutations: { addToCounter(state, payload){ state.counterVal = state.counterVal + payload; } }, actions:{ } })

componente :

 <template> <div> <h1>Vuex Counter</h1> <h1 class="counter">{{ counterVal }}</h1> <button class="button">-</button> <input class="input" v-model="inputVal" type="number" /> <button class="button" @click="addToCounter(inputVal)" > + </button> </div> </template> <script> import { ref, computed } from 'vue' import { mapState, mapMutations ,useStore } from 'vuex'; export default { setup() { const store = useStore() const inputVal = ref(1); return{ counterVal: computed(() => store.state.counterVal), addToCounter: computed(() => store.commit.addToCounter), inputVal, } }, /* computed: { ...mapState(['counterVal']) } */ } </script>

Aquí está la salida de la consola: