Vuex：未知突变类型：dropdownState

Question

我是初学者，正在尝试学习一些东西。我正在使用 vue js 2 并且遇到 vuex 问题。当我单击下拉菜单的 div 时，我想添加活动 class 并显示下拉菜单的内容。问题是

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

应该是突变s（有一个s）

mutations: {
  ...
}

https://vuex.vuejs.org/guide/mutations.html#mutations
顺便说一句，它也会是 actions！

Vuex：未知突变类型：dropdownState

Vuex: unknown mutation type: dropdownState

vue.js

vuex