当前位置: 首页 > news >正文

【vue3+ts】TypeError: Cannot read properties of undefined (reading ‘commit‘)

项目场景:

<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报错,提示:

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。

解决方法

经排查,const store = useStore()不能写在setup函数的函数内部,应该就写在setup下。useStore这个方法的调用位置是有要求的,它只能在setup函数中调用,这是它的语法规定。

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文档:官网

http://www.lryc.cn/news/96034.html

相关文章:

  • seq2seq、attention、self-attention、transformer、bert
  • 07.计算机网络——数据链路层
  • 海外服务器推荐:国外高性能服务器免费
  • Python基于PyTorch实现卷积神经网络分类模型(CNN分类算法)项目实战
  • JMeter 配置环境变量步骤
  • Rust vs Go:常用语法对比(六)
  • css元素定位:通过元素的标签或者元素的id、class属性定位
  • java享元模式
  • ESP32(MicroPython) 两轮差速五自由度机械臂小车
  • mysql基本函数(五)
  • liteflow 2.10 配置中心简单记录
  • 【C++】引用、内联函数等
  • RocketMQ教程-(4)-主题(Topic)
  • 睡眠健康数据分析
  • Spring Boot 3.x 系列【47】启动流程 | 启动监听器
  • 【KD】知识蒸馏与迁移学习的不同
  • 计算机内存中的缓存Cache Memories
  • Flask的send file和send_from_directory的区别
  • Java 队列
  • 【算法基础:搜索与图论】3.6 二分图(染色法判定二分图匈牙利算法)
  • SpringMVC 怎么和 AJAX 相互调用的
  • UCDOS和WPS推动计算机领域的汉字化发展,中文编程该谁力扛大旗?
  • golang+layui提升界面美化度--[推荐]
  • 42. 接雨水
  • Python学习阶段路线和内容
  • RocketMQ教程-安装和配置
  • 【LeetCode】55.跳跃游戏
  • Docker学习路线12:开发者体验
  • 后端服务迁移方案及过程记录
  • StAX解析