項(xiàng)目場景：

<script lang="ts">
import { defineComponent, reactive, ref } from 'vue'
import { useStore } from 'vuex'
export default defineComponent({
  name: 'Login.vue',
  components: {},
  setup () {
    const onFormSubmit = (result: boolean) => {
      if (result) {
        console.log('result', result)
        router.push('/')
        const store = useStore()
        store.commit('login')
        console.log(store, useStore)
      }
    }
    return {    
      onFormSubmit
    }
  }
})
</script>

vue3組合式api中使用store.commit報(bào)錯(cuò)，提示：

Uncaught runtime errors:
×
ERROR
Cannot read properties of undefined (reading 'commit')
TypeError: Cannot read properties of undefined (reading 'commit')
    at onFormSubmit (webpack-internal:///./node_modules/ts-loader/index.js??clonedRuleSet-40.use[0]!./node_modules/vue-loader/dist/index.js??ruleSet[0].use[0]!./src/views/Login.vue?vue&type=script&lang=ts:46:23)
    at callWithErrorHandling (webpack-internal:///./node_modules/@vue/runtime-core/dist/runtime-core.esm-bundler.js:296:18)
    at callWithAsyncErrorHandling (webpack-internal:///./node_modules/@vue/runtime-core/dist/runtime-core.esm-bundler.js:304:17)
    at emit (webpack-internal:///./node_modules/@vue/runtime-core/dist/runtime-core.esm-bundler.js:800:5)
    at Object.eval (webpack-internal:///./node_modules/@vue/runtime-core/dist/runtime-core.esm-bundler.js:7528:45)
    at Proxy.submitForm (webpack-internal:///./node_modules/ts-loader/index.js??clonedRuleSet-40.use[0]!./node_modules/vue-loader/dist/index.js??ruleSet[0].use[0]!./src/components/ValidateForm.vue?vue&type=script&lang=ts:19:21)
    at eval (webpack-internal:///./node_modules/ts-loader/index.js??clonedRuleSet-40.use[0]!./node_modules/vue-loader/dist/templateLoader.js??ruleSet[1].rules[3]!./node_modules/vue-loader/dist/index.js??ruleSet[0].use[0]!./src/components/ValidateForm.vue?vue&type=template&id=36c7a62a&ts=true:24:60)
    at eval (webpack-internal:///./node_modules/@vue/runtime-dom/dist/runtime-dom.esm-bundler.js:1487:12)
    at callWithErrorHandling (webpack-internal:///./node_modules/@vue/runtime-core/dist/runtime-core.esm-bundler.js:296:18)
    at callWithAsyncErrorHandling (webpack-internal:///./node_modules/@vue/runtime-core/dist/runtime-core.esm-bundler.js:304:17)

打印store的值，顯示undefined。

解決方法

經(jīng)排查，const store = useStore()不能寫在setup函數(shù)的函數(shù)內(nèi)部，應(yīng)該就寫在setup下。useStore這個(gè)方法的調(diào)用位置是有要求的，它只能在setup函數(shù)中調(diào)用，這是它的語法規(guī)定。

import { useStore } from 'vuex'

export default {
  setup () {
    const store = useStore()
	 const onFormSubmit = (result: boolean) => {
      if (result) {
        store.commit('login')
        console.log(store, useStore)
      }
    }
    return {    
      onFormSubmit
    }
  }
}

組合式API中使用vuex文檔：官網(wǎng)文章來源地址http://www.zghlxwxcb.cn/news/detail-610039.html

到了這里，關(guān)于【vue3+ts】TypeError: Cannot read properties of undefined (reading ‘commit‘)的文章就介紹完了。如果您還想了解更多內(nèi)容，請?jiān)谟疑辖撬阉鱐OY模板網(wǎng)以前的文章或繼續(xù)瀏覽下面的相關(guān)文章，希望大家以后多多支持TOY模板網(wǎng)！