Vuex: unknown mutation type: dropdownState

Question

im beginner and trying something for learn. im using vue js 2 and have a problem with vuex. When I click div of dropdown, I want to add active class and show content of dropdown. The problem is

unknown mutation type: dropdownState.

store.js

import Vue from 'vue';
import Vuex from 'vuex';

Vue.use(Vuex);

export const store = new Vuex.Store({
  state: {
    active: false,
  },

  getters: {
    isOpen (state) {
      return state.active;
    },
  },

  mutation: {
    dropdownState (state) {
      state.active = !state.active;
      console.log('hi');
    },
  },
});

Dropdown.vue

<template>
  <div class="dropdown" @click="dropdownState">
    <slot name="button"></slot>
    <slot></slot>
  </div>
</template>

<script>
import { mapMutations } from 'vuex';
export default {
  name: 'Dropdown',
  methods: {
    ...mapMutations(['dropdownState']),
  }
};
</script>

DropdownContent.vue

<template>
  <div>
    <div class="dropdown-content right" :class="{ active : active }"></div>
  </div>
</template>

<script>
import { mapState, mapGetters } from 'vuex';
export default {
  name: 'DropdownContent',
  computed: {
    ...mapState(['active']),
    ...mapGetters(['isOpen']),
  },
};
</script>

Answer 1

It's supposed to be mutations (with an s)

mutations: {
  ...
}

https://vuex.vuejs.org/guide/mutations.html#mutations
Btw, it will be actions too!