在使用vuex的時(shí)候出現(xiàn)commit未定義錯(cuò)誤的解決

更新時(shí)間：2023年01月10日 16:15:02 作者：web前端?zxp

這篇文章主要介紹了在使用vuex的時(shí)候出現(xiàn)commit未定義錯(cuò)誤的解決方案，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教

使用vuex的時(shí)候出現(xiàn)commit未定義錯(cuò)誤

出現(xiàn)的原因

書寫錯(cuò)誤
當(dāng)然，這個(gè)錯(cuò)誤不是你單詞書寫錯(cuò)誤
只要的原因是因?yàn)槟愕倪@個(gè) 方法里面沒(méi)有 commit 這個(gè)方法
為什么沒(méi)有？其實(shí)它是有的，只不過(guò)在 context 里面
你可能是直接寫 commit（xxx）了

錯(cuò)誤展現(xiàn)過(guò)程

首先我們先調(diào)用一下

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

為什么是 dispatch ，因?yàn)槟悴皇怯?commit 了嗎？

這個(gè)就是在 actions 里面調(diào)用 mutations 里面的方法的

然后就是代碼：

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

可以看到接受了一個(gè)參數(shù)，這個(gè)參數(shù)是它默認(rèn)傳的，你不能改變
commit 在 context 里面，但是你是直接寫

正確調(diào)用的話可以這樣來(lái)寫：

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

或者這樣：

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

vuex模塊化 commit()時(shí)報(bào)錯(cuò) unknown mutation type:xxx

廢話不多說(shuō)直接上問(wèn)題

我寫了兩個(gè)組件，準(zhǔn)備練習(xí)Vuex的模塊化

這是Count模塊(計(jì)數(shù)作用)的js

increment方法觸發(fā)后，由于邏輯十分簡(jiǎn)單我就直接給到了mutations

讓他加

? 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,
? ? },

這是Person模塊(添加人員作用)的js

add方法觸發(fā)后將信息封裝成對(duì)象直接給到mutations，然后一個(gè)unshift新增即可

? 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);
? ? ? ? },
? ? },

然后這是storejs

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

// 使用vuex
Vue.use(Vuex)

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

// 創(chuàng)建并暴露store
export default new Vuex.Store({
? ? modules:{
? ? ? ? countAbout:CountOptions,
? ? ? ? personAbout:PersonOptions,
? ? }
})

就這樣，run起來(lái)后，

觸發(fā)increment（數(shù)字+） ==> 成功
觸發(fā)add（加一個(gè)人） ==> unknown mutation type:ADD_PERSON

于是我把$store撈出來(lái)，找到_mutations

發(fā)現(xiàn)我的添加人員的add指向的的mutation 外面包了一層，

完事我將這一層加上去，成功實(shí)現(xiàn)，

然后我將Count的加上countAbout反而報(bào)錯(cuò)

那么問(wèn)題來(lái)了，為啥我兩個(gè)模塊的寫法是一樣，然后調(diào)用的模塊的情況也是一樣的（count.vue==>count模塊，person.vue==>person模塊），一個(gè)包了一個(gè)沒(méi)包，于是我懷疑是引入順序的問(wèn)題，覺(jué)得第一個(gè)引入的模塊不包，于是我將模塊的引入，聲明甚至組件的順序都調(diào)換了順序，然而并沒(méi)有什么軟用。。。

于是我寫了一個(gè)臨時(shí)的test模塊。分別copy Count，Person模塊的js，

然后我以為是命名的問(wèn)題，因?yàn)槲业膬蓚€(gè)模塊的命名一個(gè)有下劃線，一個(gè)沒(méi)有下劃線，于是：