Vuex mutation: deconstruct state parameter using ES6 syntax (using quasar framework)

Question

I have two different syntaxes. I can access my getters and my actions using mapGetters() and mapActions(). The first one doesn't deconstruct the state parameter and works. The second one does deconstruct the state but the mutation doesn't mutate the state while the getter can access the state and the action has no problem deconstructing the context.

I don't understand why. Do I misuse ES6 / vuejs / vuex / quasar ?

Vue.use(Vuex)

export default new Vuex.Store({
  state: {
    counter1: 0,
    counter2: 0
  },
  getters: {
    counter1: state => state.counter1,
    counter2: ({ counter2 }) => counter2
  },
  mutations: {
    increment1: state => state.counter1++,
    increment2: ({ counter2 }) => counter2++
  },
  actions: {
    increment1: context => context.commit('increment1'),
    increment2: ({ commit }) => commit('increment2')
  }
})

Answer 1

A friend of mine gave me the answer. I misused ES6.

{ counter2 } doesn't reference state.counter2, but makes a copy of it.

It makes sense that I can't change state.counter2 when changing counter2.