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

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

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

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

出現(xiàn)的原因

書寫錯誤
當(dāng)然，這個錯誤不是你單詞書寫錯誤
只要的原因是因為你的這個方法里面沒有 commit 這個方法
為什么沒有？其實它是有的，只不過在 context 里面
你可能是直接寫 commit（xxx）了

錯誤展現(xiàn)過程

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

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

為什么是 dispatch ，因為你不是用 commit 了嗎？

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

然后就是代碼：

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

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

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

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

或者這樣：

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

vuex模塊化 commit()時報錯 unknown mutation type:xxx

廢話不多說直接上問題

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

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

increment方法觸發(fā)后，由于邏輯十分簡單我就直接給到了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ā)后將信息封裝成對象直接給到mutations，然后一個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起來后，

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

于是我把$store撈出來，找到_mutations

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

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

然后我將Count的加上countAbout反而報錯

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

于是我寫了一個臨時的test模塊。分別copy Count，Person模塊的js，

然后我以為是命名的問題，因為我的兩個模塊的命名一個有下劃線，一個沒有下劃線，于是：