在使用vuex的时候出现commit未定义错误的解决

<div><input type="button" @click="$store.dispatch('listMore')" value="加载更多"></div>

actions = {
     login(context){
            commit("CHANGE_USERNAME")
        }
    }
};

actions = {
     login(context){
            context.commit("CHANGE_USERNAME")
        }
    }
};

actions = {
     login({commit}){  //加 { }
            commit("CHANGE_USERNAME")
        }
    }
};

  methods: {
    increment() {
      this.$store.commit("INCREMENT", this.n);
    },
    decrement() {
      this.$store.commit("DECREMENT", this.n);
    },
    incrementOdd() {
      this.$store.dispatch("incrementOdd", this.n);
    },
    incrementWait() {
      this.$store.dispatch("incrementWait", this.n);
    },
  },

    mutations: {
        // 加
        INCREMENT(state, value) {
            state.sum += value;
        },
        // 减
        DECREMENT(state, value) {
            state.sum -= value;
        }
    },
    state: {
        sum: 0,
        bigSum: 0,
    },

  methods: {
    add() {
      const personObj = { id: nanoid(), name: this.name };
      console.log(this.$store);

      this.$store.commit("ADD_PERSON", personObj);
      this.name = "";
    },
  },

    mutations: {
        ADD_PERSON(state, personObj) {
            state.personList.unshift(personObj);
        },
    },

import Vue from 'vue'
// 引用vuex
import Vuex from 'vuex';

// 使用vuex
Vue.use(Vuex)

import CountOptions from './count';
import PersonOptions from './person';

// 创建并暴露store
export default new Vuex.Store({
    modules:{
        countAbout:CountOptions,
        personAbout:PersonOptions,
    }
})