Nuxt中出现Cannot read properties of undefined (reading 'commit')错误求助

核心原因 #

报错本质是this.$store为undefined，导致无法调用commit方法。以下是常见问题和解决办法：

1. Store文件未正确导出 #

你的store.js代码创建了store实例，但没有对外导出，Nuxt无法将其注入到应用中。修改store.js：

import { createStore } from 'vuex'

const store = createStore({
  state () {
    return {
        cart:[],
        cartItems:0,
        checkoutStatus: null,
        highprice: 1500,
        sale: false
    }
  },
  mutations:{
    setHighPrice(state, value) {
        state.highprice = value
    },
  }
})

// 必须导出store实例
export default store

2. Nuxt版本对应的Store配置差异 #

• Nuxt 2：默认集成Vuex 3，推荐使用模块化写法（无需手动调用createStore）。如果要沿用你的写法，需确保在nuxt.config.js中配置store：

  export default {
    store: true, // 启用store
    // 或者指定store文件路径
    // store: './store.js'
  }
  

• Nuxt 3：如果使用Vuex，需要先安装依赖：

  npm install @nuxtjs/vuex vuex@next
  

  然后在nuxt.config.ts中添加模块：

  export default defineNuxtConfig({
    modules: ['@nuxtjs/vuex']
  })
  

3. 组件中this指向异常 #

虽然你的methods写法是普通函数（不会改变this指向），但如果存在以下情况也会导致问题：

• 用箭头函数定义updateHighPrice（会绑定外层this而非组件实例）
• 调用方法时手动改变了this指向

确保方法定义保持当前的普通函数形式即可：

methods: {
  updateHighPrice($event) {
    this.$store.commit('setHighPrice', $event.target.value)
  }
}

4. 验证Store是否正确注入 #

可以在组件的created钩子中打印this.$store，确认是否存在：

created() {
  console.log(this.$store) // 若输出undefined，说明注入失败，回到前面步骤排查
}

另外，你尝试换成dispatch无效是因为this.$store本身就不存在，所以不管调用commit还是dispatch都会报错，核心还是解决store注入的问题。

内容的提问来源于stack exchange，提问作者Felix