【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.mzph.cn/news/9216.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

http 请求报文响应报文的格式以及Token cookie session 区别

面试必备 http 请求报文响应报文的格式Token cookie session 区别 http 请求报文响应报文的格式 HTTP 请求报文和响应报文的格式如下&#xff1a; HTTP 请求报文格式&#xff1a; <方法> <路径> <协议版本> <请求头部字段1>: <值1> <请求头…

4-Linux组管理和权限管理

Linux组管理和权限管理 Linux组的基本介绍文件/目录的所有者组的创建文件/目录所在的组其它组改变用户所在的组权限的基本介绍第0-9位说明rwx权限详解rwx 修饰文件时rwx修饰目录时 修改权限第一种方式&#xff1a;、-、 变更权限第二种方式&#xff1a;通过数字变更权限 修改文…

安全学习DAY07_其他协议抓包技术

协议抓包技术-全局-APP&小程序&PC应用 抓包工具-Wireshark&科来分析&封包 TCPDump&#xff1a; 是可以将网络中传送的数据包完全截获下来提供分析。它支持针对网络层、协议、主机、网络或端口的过滤&#xff0c;并提供and、or、not等逻辑语句来帮助你去掉无用…

疾风计划-程序设计基础-期末考试-05

擀面皮 有一块1x1的方形面团&#xff08;不考虑面团的厚度&#xff09;&#xff0c;其口感值为0。擀面师傅要将其擀成一个N x M&#xff08;纵向长N&#xff0c;横向宽M&#xff09;的面皮。师傅的擀面手法娴熟&#xff0c;每次下手&#xff0c;要么横向擀一下&#xff08;使得…

深入理解Linux 内核追踪机制

Linux 存在众多 tracing tools&#xff0c;比如 ftrace、perf&#xff0c;他们可用于内核的调试、提高内核的可观测性。众多的工具也意味着繁杂的概念&#xff0c;诸如 tracepoint、trace events、kprobe、eBPF 等&#xff0c;甚至让人搞不清楚他们到底是干什么的。本文尝试理清…

JOGL教程_编程入门自学教程_菜鸟教程-免费教程分享

教程简介 Java支持OpenGL(JOGL)是在Java OpenGL图形API结合。它是一个包装库,它可以访问OpenGL API,并且它被设计来创建Java编码的2D和3D图形应用程序。它允许将 OpenGL 与 Java 编程语言一起使用&#xff0c;因此&#xff0c;程序员可以在 JOGL 的帮助下轻松地将计算机图形嵌…

centos下安装ftp-读取目录列表失败-

1.下载安装ftp服务器端和客户端 #1.安装yum -y install vsftpdyum -y install ftp #2.修改配置文件vim /etc/vsftpd.conflocal_enablesYESwrite_enableYESanonymous_enableYESanon_mkdir_write_enableYES //允许匿名用户在FTP上创建目录anon_upload_enableYES //允许匿名用户…

B074-详情富文本 服务上下架 高级查询 分页 查看详情

目录 服务详情修改优化ProductServiceImplProduct.vue 详情数据-富文本-vue-quill-editor使用步骤测试图片的访问方式富文本集成fastDfs 后台服务上下架&#xff08;批量&#xff09;前端开始后端完成ProductControllerProductServiceImplProductMapper 前台展示上架前端开始后…

MySQL - 事务隔离级别

并发事务问题 脏读 概念&#xff1a; 一个事务读到另外一个事务还没提交的数据 举例&#xff1a; 事务A&#xff1a;第一步&#xff1a;select 第二步&#xff1a;update 第三步&#xff1a;… 事务B&#xff1a;第一步&#xff1a;select 第二步&#xff1a;… 假设原本在…

PostgreSQL 常用空间处理函数

1.OGC标准函数 管理函数&#xff1a; 添加几何字段 AddGeometryColumn(, , , , , ) 删除几何字段 DropGeometryColumn(, , ) 检查数据库几何字段并在geometry_columns中归档 Probe_Geometry_Columns() 给几何对象设置空间参考&#xff08;在通过一个范围做空间查询时常用&…

C#设计模式之---原型模式

原型模式&#xff08;Prototype Pattern&#xff09; 原型模式&#xff08;Prototype Pattern&#xff09; 是用原型实例指定创建对象的种类&#xff0c;并且通过拷贝这些原型创建新的对象。原型模式是一种创建型设计模式。也就是用一个已经创建的实例作为原型&#xff0c;通过…

使用docker 部署自己的chatgpt

直接docker部署 docker run --name chatgpt-web -d -p 3002:3002 --env OPENAI_API_KEYyour_api_key chenzhaoyu94/chatgpt-web:latestDocker compose部署 version: 3services:app:image: chenzhaoyu94/chatgpt-web # 总是使用 latest ,更新时重新 pull 该 tag 镜像即可ports…

NLP(六十一)使用Baichuan-13B-Chat模型构建智能文档问答助手

在文章NLP&#xff08;六十&#xff09;Baichuan-13B-Chat模型使用体验中&#xff0c;我们介绍了Baichuan-13B-Chat模型及其在向量嵌入和文档阅读上的初步尝试。   本文将详细介绍如何使用Baichuan-13B-Chat模型来构建智能文档问答助手。 文档问答流程 智能文档问答助手的流…

【*1900 图论】CF1328 E

Problem - E - Codeforces 题意&#xff1a; 思路&#xff1a; 注意到题目的性质&#xff1a;满足条件的路径个数是极少的&#xff0c;因为每个点离路径的距离<1 先考虑一条链&#xff0c;那么直接就选最深那个点作为端点即可 为什么&#xff0c;因为我们需要遍历所有点…

3.安装kubesphere

1.本地存储动态 PVC # 在所有节点安装 iSCSI 协议客户端&#xff08;OpenEBS 需要该协议提供存储支持&#xff09; yum install iscsi-initiator-utils -y # 设置开机启动 systemctl enable --now iscsid # 启动服务 systemctl start iscsid # 查看服务状态 systemctl status …

将数据转二进制流文件,用PostMan发送二进制流请求

一、将byte数组转二进制流文件&#xff0c;并保存到本地 byte [] oneshotBytesnew byte[]{78,-29,51,-125,86,-105,56,82,-94,-115,-22,-105,0,-45,-48,-114,27,13,38,45,-24,-15,-13,46,88,-90,-66,-29,52,-23,40,-2,116,2,-115,17,36,15,-84,88,-72,22,-86,41,-90,-19,-58,19…

Opencv-C++笔记 (13) : opencv-图像卷积一(均值、中值、高斯、双边滤波)与 边缘处理

文章目录 一、概述图像滤波1.1、均值滤波1.2中值滤波1.3、高斯滤波1.4、双边滤波1.5、方框滤波 二、自定义掩码三、边缘处理四、Sobel算子五、Scharr算子六、拉普拉斯算子十、Canny算法 一、概述图像滤波 头文件 quick_opencv.h&#xff1a;声明类与公共函数 #pragma once #i…

13.Netty源码之Netty中的类与API

highlight: arduino-light ServerBootstrap Bootstrap 意思是引导&#xff0c;一个 Netty 应用通常由一个 Bootstrap 开始&#xff0c;主要作用是配置整个 Netty 程序&#xff0c;串联各个组件&#xff0c;Netty 中ServerBootstrap 是服务端启动引导类。 java //泛型 AbstractB…

Vue2到3 全套学习内容(持续更新)

Vue 初次上手 1. Vue 概念 概念: Vue 是一个用于 构建用户界面 的 渐进式 框架 ①构建用户界面&#xff1a;基于数据动态渲染出用户看到的页面 ②渐进式&#xff1a;循序渐进 Vue的两种使用方式: ①Vue 核心包开发 场景: 局部 模块改造 ②Vue核心包&Vue插件工程化开发…

C++-----list

本期我们来讲解list&#xff0c;有了string和vector的基础&#xff0c;我们学习起来会快很多 目录 list介绍 ​编辑 list常用接口 insert erase reverse sort merge unique remove splice 模拟实现 基础框架 构造函数 push_back 迭代器 常见问题 const迭代器 …