VueX actions/mutations error in Chrome console

Question

I try to store drawer data in VueX to use it on external component.

My console error: [vuex] unknown action type: app/switchDrawer

My VueJS template:

pages/test.vue

<template>
  <v-navigation-drawer v-model="drawer" app>
    <v-list dense>
      ...
    </v-list>
  </v-navigation-drawer>
</template>

<script>
export default {
  computed: {
    drawer: {
      get () {
        return this.$store.state.app.drawer
      },
      set (value) {
        console.log(value);
        return this.$store.dispatch('app/toggleDrawer', value)
      }
    }
  }
}
</script>

The console.log() function give me lot of lines in loop in console.

I'd like to use too the mapGetters class from VueX instead computed get/set:

computed: mapGetters({
  drawer: 'app/drawer'
})

I've an error in console:

[Vue warn]: Computed property "drawer" was assigned to but it has no setter.

My VueX store:

store/app.js

export const state = () => ({
  drawer: true
})

export const getters = {
  drawer: state => state.drawer
}

export const mutations = {
  TOGGLE_DRAWER: (state) => {
    state.drawer = !state.drawer
  }
}

export const actions = {
  toggleDrawer ({ commit }, value) {
    commit('TOGGLE_DRAWER', value)
  }
}

Answer 1

Found your problem - a computed setter has to have no return statement.

 drawer: {
      get () {
        return this.$store.state.app.drawer
      },
      set (value) {
        this.$store.dispatch('app/toggleDrawer', value)
      }
    }

Please notice that your action submits a value to the mutation which dosen't take any value. So better add a new mutation that handles said value:

export const mutations = {
  SET_DRAWER: (state, value) => {
    state.drawer = value
  }
}

export const actions = {
  toggleDrawer ({ commit }, value) {
    commit('SET_DRAWER', value)
  }
}