Vue.js 是一個(gè)非常流行的前端框架，它讓開(kāi)發(fā)者能夠更高效地構(gòu)建響應(yīng)式的頁(yè)面。在 Vue.js 中，我們通常會(huì)使用 commit 方法來(lái)提交一個(gè) mutation，從而改變應(yīng)用的狀態(tài)。然而，有時(shí)候在使用 commit 方法的時(shí)候可能會(huì)遇到一個(gè)錯(cuò)誤提示，即 “commit underfind”。我們來(lái)看看這個(gè)錯(cuò)誤是什么樣的，以及該如何解決它。

通常，當(dāng)我們使用 commit 方法提交一個(gè) mutation 時(shí)，我們會(huì)調(diào)用一個(gè)在 store 中定義的 mutations 方法，如下所示：

mutations: {
updateName(state, newName) {
state.name = newName
}
}
this.$store.commit('updateName', 'Jack')

然而，在一些情況下，我們會(huì)發(fā)現(xiàn)上面的代碼會(huì)導(dǎo)致下面這個(gè)錯(cuò)誤：

Uncaught TypeError: Cannot read property 'commit' of undefined

這時(shí)候，我們需要注意一下兩個(gè)方面。

第一：檢查 store 實(shí)例是否正確引入了。我們?cè)谑褂?Vuex 中的時(shí)候，通常需要在 Vue 實(shí)例中進(jìn)行注冊(cè)，如下所示：

import Vue from ‘vue’
import Vuex from ‘vuex’
Vue.use(Vuex)
const store = new Vuex.Store({/* options */})

第二：檢查組件中是否正確引用了該實(shí)例。有時(shí)候，我們?cè)诮M件中可能會(huì)犯錯(cuò)，如下面這種情況：

computed: {
name() {
return this.$store.state.name
}
},
created() {
this.$store.commit('updateName', 'Jack')
}

我們會(huì)發(fā)現(xiàn)，在上面這個(gè)代碼中，我們?cè)?created 生命周期鉤子中直接調(diào)用了 commit 方法，但其實(shí)此時(shí) store 實(shí)例尚未被創(chuàng)建，因此會(huì)發(fā)生 “commit underfind” 的錯(cuò)誤。為了解決這個(gè)問(wèn)題，我們需要將這條語(yǔ)句移到 mounted 生命周期鉤子中，如下所示：

computed: {
name() {
return this.$store.state.name
}
},
mounted() {
this.$store.commit('updateName', 'Jack')
}

在真正的渲染完成之后，這個(gè)組件的實(shí)例會(huì)被創(chuàng)建，此時(shí)我們就可以對(duì) store 實(shí)例進(jìn)行調(diào)用了。