You commit changes to state in Vuex using defined mutations
. You can easily access these state mutations in your template using mapMutations
. This lesson shows you have to wire together your Vue.js template with your Vuex store using mutations and mapMutations.
store/index.js:
import Vuex from 'vuex' const store = () => new Vuex.Store({ state: { counter: 0 }, mutations: { increment: (state) => { state.counter++ }, decrement: (state) => { state.counter-- } } }) export default store
pages/index.vue:
<template> <div> Counter: {{counter}} <button @click='increment'>+</button> <button @click='decrement'>-</button> </div> </template> <script> import { mapState, mapMutations } from 'vuex' export default { computed: { ...mapState({ counter: (state) => state.counter }) }, methods: { ...mapMutations([ 'increment', 'decrement' ]) } } </script>