当前位置: 首页 > 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文档:官网

相关文章:

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

项目场景&#xff1a; <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…...

seq2seq、attention、self-attention、transformer、bert

seq2seq seq2seq&#xff1a;输入序列&#xff0c;输出序列&#xff0c;将输入的语言转为一个向量&#xff0c;最后输出再将向量转为语言shortcoming:The final state is incapable of remembering a long sequence.即太长了记不住 attention 用attention可以改进seq2seq中的…...

07.计算机网络——数据链路层

文章目录 数据链路层以太网帧格式MAC地址理解MAC地址和IP地址认识MTUMTU对IP协议的影响MTU对UDP协议的影响MTU对于TCP协议的影响 ARP协议**ARP**协议的作用ARP协议的工作流程ARP数据报的格式 数据链路层 ​ 数据链路层在物理层提供的服务的基础上向网络层提供服务&#xff0c;…...

海外服务器推荐:国外高性能服务器免费

对于寻找高性能的海外服务器&#xff0c;海外服务器推荐指导&#xff0c;我建议您考虑以下因素&#xff1a; 1. 可靠性和性能&#xff1a;选择信誉良好、可靠性好的服务器提供商。它们应该有稳定的网络基础设施和高性能的服务器硬件来满足您的需求。 2. 位置选择&#xff1a;…...

Python基于PyTorch实现卷积神经网络分类模型(CNN分类算法)项目实战

说明&#xff1a;这是一个机器学习实战项目&#xff08;附带数据代码文档视频讲解&#xff09;&#xff0c;如需数据代码文档视频讲解可以直接到文章最后获取。 1.项目背景 卷积神经网络&#xff0c;简称为卷积网络&#xff0c;与普通神经网络的区别是它的卷积层内的神经元只覆…...

JMeter 配置环境变量步骤

通过给 JMeter 配置环境变量&#xff0c;可以快捷的打开 JMeter&#xff1a; 打开终端。执行 jmeter。 配置环境变量的方法如下。 Mac 和 Linux 系统 1、在 ~/.bashrc 中加如下内容&#xff1a; export JMETER_HOMEJMeter所在目录 export PATH$JAVA_HOME/bin:$PATH:.:$JME…...

Rust vs Go:常用语法对比(六)

题图来自[1] 101. Load from HTTP GET request into a string Make an HTTP request with method GET to URL u, then store the body of the response in string s. 发起http请求 package mainimport ( "fmt" "io/ioutil" "net" "net/http…...

css元素定位:通过元素的标签或者元素的id、class属性定位

前言 大部分人在使用selenium定位元素时&#xff0c;用的是xpath元素定位方式&#xff0c;因为xpath元素定位方式基本能解决定位的需求。xpath元素定位方式更直观&#xff0c;更好理解一些。 css元素定位方式往往被忽略掉了&#xff0c;其实css元素定位方式也有它的价值&…...

java享元模式

在Java中实现享元模式&#xff0c;可以通过创建一个享元工厂&#xff08;FlyweightFactory&#xff09;和享元对象&#xff08;Flyweight&#xff09;来完成。享元模式用于共享可复用对象&#xff0c;以节省内存和提高性能。 下面是一个简单的示例&#xff1a; 首先&#xff…...

ESP32(MicroPython) 两轮差速五自由度机械臂小车

这次的项目在软件上没多少调整&#xff0c;但本人希望分享一下硬件上的经验。 小车使用两轮差速底盘&#xff0c;驱动轮在小车中间&#xff0c;前后都要万向轮。这种形式可以实现0转弯半径&#xff0c;但受万向轮及用于加高的铜柱的规格限制&#xff0c;两个万向轮难以调到相同…...

mysql基本函数(五)

目录 一、数字函数二、字符函数三、日期时间函数3.1 获取系统日期时间的函数3.2 日期格式化函数3.3 日期偏移计算3.4 日期之间相隔的天数 四、条件函数4.1 IF语句4.2 条件语句 一、数字函数 函数功能用例ABS绝对值ABS(-100)ROUND四舍五入ROUND(4.62)FLOOR向下取值FLOOR(9.9)CE…...

liteflow 2.10 配置中心简单记录

除nacos是一个key 同时管理chain和script node外,可以理解为配置文件整体放到一个key下nacos下的文件必须是xml格式,系统只实现了xml parser其它etcd,zk,Apollo 是两个namespace/path(chain及script node各一)下多个key,每个key对应一个chain/node所有配置中心的核心代码…...

【C++】引用、内联函数等

文章目录 一、引用1.引用概念2.引用特性3.引用时的权限问题4 .使用场景5 .引用和指针的联系与区别 二、内联函数1.概念2.注意点 三、auto关键字1.概念2.auto的使用细则 四、 基于范围的for循环1.概念2.范围for的使用条件 五、 指针空值nullptr1.概念2.使用注意 一、引用 1.引用…...

RocketMQ教程-(4)-主题(Topic)

本文介绍 Apache RocketMQ 中主题&#xff08;Topic&#xff09;的定义、模型关系、内部属性、行为约束、版本兼容性及使用建议。 定义​ 主题是 Apache RocketMQ 中消息传输和存储的顶层容器&#xff0c;用于标识同一类业务逻辑的消息。 主题的作用主要如下&#xff1a; 定义…...

睡眠健康数据分析

项目背景 背景描述 本数据集涵盖了与睡眠和日常习惯有关的诸多变量。如性别、年龄、职业、睡眠时间、睡眠质量、身体活动水平、压力水平、BMI类别、血压、心率、每日步数、以及是否有睡眠障碍等细节。 数据集的主要特征&#xff1a; 综合睡眠指标&#xff1a; 探索睡眠持续时…...

Spring Boot 3.x 系列【47】启动流程 | 启动监听器

有道无术,术尚可求,有术无道,止于术。 本系列Spring Boot版本3.1.0 源码地址:https://gitee.com/pearl-organization/study-spring-boot3 文章目录 1. 前言2. 核心类2.1 SpringApplicationRunListener2.2 ApplicationStartup2.3 ApplicationListener3. 执行流程3.1 获取监…...

【KD】知识蒸馏与迁移学习的不同

知识蒸馏与迁移学习的不同 (1)数据域不同. 知识蒸馏中的知识通常是在同一个目标数据集上进行迁移&#xff0c;而迁移学习中的知识往往是在不同目标的数据集上进行转移. (2)网络结构不同. 知识蒸馏的两个网络可以是同构或者异构的&#xff0c;而迁移学习通常是在单个网络上利用其…...

计算机内存中的缓存Cache Memories

这篇写一下计算机系统中的缓存Cache应用场景和实现方式介绍。 Memory hierarchy 在讲缓存之前&#xff0c;首先要了解计算机中的内存结构层次Memory hierarchy。也就是下图金字塔形状的结构。 从上到下&#xff0c;内存层次结构如下&#xff1a; 寄存器&#xff1a;这是计算机…...

Flask的send file和send_from_directory的区别

可以自行查看flask 文档。 send file高效&#xff1b; send from directory安全&#xff0c;且适用于静态资源交互。 都是实现相同的功能的。 send_file send_from_directory...

Java 队列

基本介绍 数组模拟队列 思路分析 代码实现 import java.util.Scanner;public class Test {public static void main(String[] args) {// 创建一个队列ArrayQueue queue new ArrayQueue(3);int select;Scanner scanner new Scanner(System.in);boolean loop true;while (lo…...

网络信息安全技术术语对照表

类别术语中文术语英文术语说明基础技术类加密encryption将明文数据通过特定算法和密钥转换为密文数据的过程&#xff0c;目的是确保数据在存储、传输过程中不被未授权方获取和理解。基础技术类解密decryption将加密后的密文数据&#xff0c;通过对应的算法和密钥还原为原始明文…...

Python AOT编译性能翻倍的5个隐藏开关:LLVM 18.1 + PGO + LTO实战配置,错过再等三年

第一章&#xff1a;Python 原生 AOT 编译方案 2026 性能调优指南随着 CPython 3.14 对原生 AOT&#xff08;Ahead-of-Time&#xff09;编译的正式支持落地&#xff0c;2026 年 Python 生态已进入“可编译、可嵌入、可确定性部署”的新阶段。本章聚焦于基于 cpython-aot 工具链与…...

Agent可观测性工程:监控、追踪与告警的最佳实践

Agent可观测性工程:监控、追踪与告警的最佳实践 一、 引言 (Introduction) (一)钩子 (The Hook) 你是否有过这种令人抓狂的经历?凌晨三点,手机突然弹出刺耳的告警提示音,内容是“你的金融风控Agent集群延迟飙升至27秒,核心交易拒单率突破5‰阈值!”。你从床上弹起来,…...

跨越平台鸿沟:在非ROS环境中通过Rosbridge与ROS 2 Humble高效通信

1. 为什么需要Rosbridge&#xff1f; 在机器人开发领域&#xff0c;ROS 2 Humble已经成为主流操作系统之一。但现实情况是&#xff0c;很多开发者可能需要在Windows、MacOS甚至是没有安装ROS的Linux环境下工作。这时候就面临一个难题&#xff1a;如何让这些非ROS环境与ROS 2系统…...

nli-distilroberta-base模型解析:深入理解其与计算机组成原理的关联

nli-distilroberta-base模型解析&#xff1a;深入理解其与计算机组成原理的关联 1. 引言&#xff1a;当自然语言处理遇上计算机组成原理 你可能已经用过nli-distilroberta-base这个轻量级的自然语言推理模型&#xff0c;但有没有想过它在计算机底层是如何运作的&#xff1f;就…...

SAE J1850 CRC-8算法详解:如何在嵌入式系统中高效实现

SAE J1850 CRC-8算法在嵌入式系统中的极致优化实践 在汽车电子和工业控制领域&#xff0c;数据通信的可靠性直接关系到系统安全。SAE J1850标准中定义的CRC-8校验算法因其高效性和可靠性&#xff0c;成为CAN总线等嵌入式通信系统的首选校验方案。不同于通用教程&#xff0c;本文…...

基于混沌麻雀搜索算法的无人机航迹规划方法:CSSA策略实现与性能分析

麻雀搜索算法&#xff08;SSA&#xff09;文章复现:《基于混沌麻雀搜索算法的无人机航迹规划方法_汤安迪》策略为:立方混沌反向学习初始化种群反向精英策略改进发现者策略正余弦算法改进加入者策略动态调整警觉者数量高斯策略扰动——CSSA。复现内容包括:改进算法实现、23个基准…...

彻底搞懂 JavaScript 运行环境:从引擎到宿主,一网打尽

你可能每天都在写 JS&#xff0c;但你知道你的代码到底是怎么跑起来的吗&#xff1f;对于前端/全栈开发者来说&#xff0c;JavaScript 早已不再是那个只能在浏览器里点点按钮的“玩具语言”。如今&#xff0c;它跑在服务器、桌面、手机、甚至微控制器上。但无论跑在哪里&#x…...

从广播风暴到安全隔离:用Wireshark抓包分析VLAN工作原理(实验对比版)

从广播风暴到安全隔离&#xff1a;用Wireshark抓包分析VLAN工作原理&#xff08;实验对比版&#xff09; 当你按下回车键发送一个广播消息时&#xff0c;这个数据包会像野火一样蔓延到整个网络——至少在没有VLAN的传统以太网中是这样。我曾亲眼见证过一个简单的ARP请求如何拖垮…...

LangBot+DeepSeek R1 QQ机器人保姆级配置教程:从下载懒人包到绕过API报错全流程

LangBotDeepSeek R1 QQ机器人保姆级配置教程&#xff1a;从下载懒人包到绕过API报错全流程 最近在折腾QQ聊天机器人&#xff0c;发现LangBotDeepSeek R1的组合特别适合像我这样的懒人。不过实际操作起来还是踩了不少坑&#xff0c;特别是API配置那块&#xff0c;简直让人抓狂。…...