当前位置: 首页 > 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…...

leetcode 101.对称二叉树(不会做)

遇到递归就抓瞎 # Definition for a binary tree node. # class TreeNode: # def __init__(self, val0, leftNone, rightNone): # self.val val # self.left left # self.right right class Solution:def isSymmetric(self, root: Optional[Tre…...

腾讯云ICP备案:变更主体备案准备

腾讯云ICP备案&#xff1a;变更主体&备案准备一、变更主体适用场景已经成功办理备案的网站/APP&#xff0c;支持备案主体信息的变更申请。当备案主体信息发生变化时&#xff0c;建议及时办理备案变更&#xff0c;避免影响业务运行&#xff0c;可直接通过腾讯云备案控制台办…...

PyTorch3D在Windows上安装总报错?试试这个绕过源码编译的Pip直装方案(适配PyTorch 2.0.1 + CUDA 11.7)

PyTorch3D在Windows上安装总报错&#xff1f;试试这个绕过源码编译的Pip直装方案&#xff08;适配PyTorch 2.0.1 CUDA 11.7&#xff09; 如果你是一名在Windows平台上进行3D视觉研究的开发者&#xff0c;想必对PyTorch3D这个强大的3D深度学习库并不陌生。然而&#xff0c;官方…...

大麦APP抢票协议分析:从‘掌密网络’代码看移动端API安全防护

大麦APP抢票协议安全防护体系深度解析 1. 移动端API安全防护的现状与挑战 在移动互联网时代&#xff0c;API作为应用与服务器通信的核心通道&#xff0c;其安全性直接关系到业务系统的稳定性和用户数据的安全。大麦APP作为国内领先的票务平台&#xff0c;面临着巨大的抢票压力和…...

WindowsCleaner系统优化实战指南:从C盘告急到性能重生

WindowsCleaner系统优化实战指南&#xff1a;从C盘告急到性能重生 【免费下载链接】WindowsCleaner Windows Cleaner——专治C盘爆红及各种不服&#xff01; 项目地址: https://gitcode.com/gh_mirrors/wi/WindowsCleaner 适用人群自测 请根据你的电脑使用情况选择符合…...

CsvHelper与Entity Framework集成:数据库导出的终极指南

CsvHelper与Entity Framework集成&#xff1a;数据库导出的终极指南 【免费下载链接】CsvHelper Library to help reading and writing CSV files 项目地址: https://gitcode.com/gh_mirrors/cs/CsvHelper 在当今数据驱动的世界中&#xff0c;CSV文件处理是每个开发者都…...

从协议本质到架构落地:WebSocket与MQTT在实时通信中的融合实践指南

1. 为什么需要WebSocket和MQTT的融合架构 第一次接触实时通信系统开发时&#xff0c;我天真地以为用WebSocket就能搞定所有需求。直到项目上线后遇到用户量激增&#xff0c;才发现单纯的WebSocket架构在扩展性和可靠性上存在明显短板。后来尝试引入MQTT协议&#xff0c;才真正解…...

Windows远程桌面防爆破实战:用PowerShell自动封禁恶意IP(附完整脚本)

Windows远程桌面安全加固&#xff1a;基于PowerShell的智能IP封禁系统 远程桌面服务&#xff08;RDP&#xff09;作为企业IT基础设施的核心组件&#xff0c;其安全性直接关系到整个系统的稳定运行。根据2023年全球网络安全报告显示&#xff0c;针对3389端口的暴力破解尝试占所有…...

C++ 拷贝构造函数深度解析:从浅拷贝到深拷贝

引言在 C 面向对象编程中&#xff0c;拷贝构造函数是一个既基础又容易出错的话题。很多初学者&#xff08;包括曾经的我&#xff09;在遇到指针成员时&#xff0c;常常因为默认的浅拷贝而导致程序崩溃或内存错误。我想通过自己的学习笔记和实践经验&#xff0c;系统地分享拷贝构…...

Android Photo Picker 避坑指南:从权限管理到低版本兼容的完整方案

Android Photo Picker 避坑指南&#xff1a;从权限管理到低版本兼容的完整方案 在移动应用开发中&#xff0c;图片选择功能几乎是社交、电商类App的标配需求。但就是这个看似简单的功能&#xff0c;却让不少开发者踩过坑&#xff1a;权限申请被用户拒绝、不同Android版本表现不…...