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

vuex properties of undefined (reading ‘getters‘)

前言:

        最近打算用vue 写个音乐播放器,在搞 vuex 的时候遇到一个很神奇报错;vuex 姿势练了千百次了,刚开始的时候我一直以为是代码问题,反复检查了带了,依旧报错。 Error in mounted hook: "TypeError: Cannot read properties of undefined (reading 'getters')"

 

 除了 mapGetters 中的 方法 都能把数据都正确,连 mapMutations 中的方法都是对的。

按理说 mapMutations 可以,mapGetters 也应该可以才对!

<script>
import { mapGetters, mapMutations } from "vuex";
export default {data() {return {};},computed: {...mapGetters({userInfo: "userInfo",}),userInfo1() {return this.$stroe.state.userInfo;},},mounted() {console.log("this.$stroe:", this.$stroe);console.log("this.$stroe.mapGetters:", this.$stroe.mapGetters);console.log("this.$stroe.getters:", this.$stroe.getters);console.log("this.$stroe.state.userInfo:", this.$stroe.state.userInfo);console.log("this.userInfo1:", this.userInfo1);console.log("this.saveToken:", this.saveToken);console.log("this.userInfo:", this.userInfo);},methods: {...mapMutations({saveToken: "saveToken",}),},
};
</script>输出
store: {…}
this.$stroe: Store {_committing: false, _actions: {…}, _actionSubscribers: Array(0), _mutations: {…}, _wrappedGetters: {…}, …}commit: ƒ boundCommit(type, payload, options)dispatch: ƒ boundDispatch(type, payload)getters: {}strict: false_actionSubscribers: []_actions: {loadStorage: Array(1), cleanStorage: Array(1)}_committing: false_devtools: undefined_makeLocalGettersCache: {}_modules: ModuleCollection {root: Module}_modulesNamespaceMap: {}_mutations: {saveToken: Array(1), updateToken: Array(1), saveUserinfo: Array(1), updateUserInfo: Array(1)}_scope: EffectScope {detached: true, active: true, effects: Array(2), cleanups: Array(0), parent: undefined}_state: {__ob__: Observer}_subscribers: []_wrappedGetters: {userInfo: ƒ, token: ƒ}state: (…)[[Prototype]]: Objectthis.$stroe.mapGetters: undefined
this.$stroe.getters: {}
this.$stroe.state.userInfo: {…}
this.userInfo1: {…}
this.saveToken: ƒ mappedMutation() {var args = [],len = arguments.length;while (len--) args[len] = arguments[len];// Get the commit method from storevar commit = this.$store.commi…

       

解决:

        各种姿势都试了,这次不知道啥情况。代码也检查了;项目重启了, 电脑也重启了。 磨了很长时间 最后试了下 换了个 vuex 版本就然可以了 ! 最后才发现 原来是 引用的 vuex 4.1.0, 版本回退到 3.6.2 就可以了 ,给大家填个坑

相关文章:

vuex properties of undefined (reading ‘getters‘)

前言&#xff1a; 最近打算用vue 写个音乐播放器&#xff0c;在搞 vuex 的时候遇到一个很神奇报错&#xff1b;vuex 姿势练了千百次了&#xff0c;刚开始的时候我一直以为是代码问题&#xff0c;反复检查了带了&#xff0c;依旧报错。 Error in mounted hook: "TypeError:…...

再谈表的约束

文章目录 自增长唯一键外键 自增长 auto_increment&#xff1a;当对应的字段&#xff0c;不给值&#xff0c;会自动的被系统触发&#xff0c;系统会从当前字段中已经有的最大值1操作&#xff0c;得到一个新的不同的值。通常和主键搭配使用&#xff0c;作为逻辑主键。 自增长的…...

认识一下测试策略与测试方案

目录 测试方案 测试策略 测试策略的内容主要包括 测试技术和工具 测试启动、停止和完成标准 风险分析和应对方案 测试范围 测试角色和职责 测试方法和类型 测试工具 测试层级 测试指标 测试可交付成果 测试方案的内容包括 测试目标 测试范围 测试环境 测试策略…...

Gradle 查看包的依赖关系

在 Terminal 中可以通过 gradle 的命令查看项目中使用的依赖库及其版本&#xff0c;并且可以更加直观的看到各个模块中库之间的依赖关系。同时也可以跟踪并解决与库版本冲突有关的问题。 工具查看 在 Android Studio 中选择 View > Tool Windoors > Gradle 或者直接选择…...

虚幻5|给攻击添加特效

一&#xff0c;打开武器蓝图 选择武器网格体&#xff0c;在细节处找到组件开始重叠&#xff0c;点击 写下以下蓝图&#xff0c;这是最终蓝图&#xff0c;后面会分讲要点 二&#xff0c;actor拥有标签&#xff0c;就是被击打的敌人&#xff0c;我们给actor添加标签 到主界面&am…...

Delphi包管理与依赖:掌握GetIt与DelphiPI的艺术

标题&#xff1a;Delphi包管理与依赖&#xff1a;掌握GetIt与DelphiPI的艺术 在Delphi的广袤生态中&#xff0c;包管理和依赖解决方案是构建大型项目不可或缺的工具。本文将深入探讨Delphi中的两种主要包管理工具&#xff1a;GetIt包管理器和DelphiPI&#xff0c;通过实际代码…...

如何使用unittest和pytest进行python脚本的单元测试

1. 关于unittest和pytest unittest是python内置的支持单元测试的模块&#xff0c;他提供了核心类&#xff0c;TestCase&#xff0c;让单元测试 代码的编写不再是从0开始&#xff0c;不再是作坊式&#xff0c;而是标准化&#xff0c;模板化&#xff0c;工厂化。 pytest是第三方…...

Java中的值传递与引用传递

Java中的值传递与引用传递 在Java编程中&#xff0c;理解值传递与引用传递的概念是编写无误代码的关键。这两个概念有时会让人感到困惑&#xff0c;特别是当它们与对象有关时。现在&#xff0c;我们将一步步地解释这两个概念&#xff0c;帮助你彻底理解它们。 1. 值传递与引用…...

Seaborn库

目录 主要功能和特点 使用方法 实例应用 Seaborn库的最新版本有哪些新功能和改进&#xff1f; 如何在Seaborn中实现复杂的数据预处理步骤&#xff0c;例如数据清洗和转换&#xff1f; Seaborn与其他数据可视化库&#xff08;如Matplotlib、Plotly&#xff09;相比有哪些优…...

openresty整合modsecurity

安装依赖包 安装依赖 yum -y install gcc-c flex bison yajl yajl-devel curl-devel curl GeoIP-devel doxygen zlib-devel libtool libxml2-devel libxslt-devel安装依赖包 ftp://ftp.icm.edu.pl/vol/rzm7/linux-centos-vault/7.8.2003/sclo/x86_64/rh/Packages/d/devtools…...

结构体structure、共用体union

目录 结构体 结构体类型的定义形式 结构体类型的大小 内存计算例子 共用体union 用共用体判断大小端 结构体和共用体对比 qsort&#xff08;&#xff09; 结构体 结构体类型——用来描述复杂数据的一种数据类型 构造类型&#xff08;用户自定义类型&#xff09; struc…...

Spring自动注册-<bean>标签和属性解析

xml文件中最常见也最核心的就是<bean>,<Import>,<beans>,<alias>标签,关于它们的解析主要是BeanDefinitionParserDelegate类中.<bean>标签的解析最为复杂和重要. <bean>标签 processBeanDefinition(ele, delegate)方法中,主要是是对…...

【仿RabbitMQ消息队列】基于C++11中packaged_tack异步线程池

目录 什么是同步和异步&#xff1f; future 使用future和async配合管理异步任务 使用promise和future配合管理异步任务 使⽤std::packaged_task和std::future配合 C11异步线程池 什么是同步和异步&#xff1f; 同步&#xff08;Synchronous&#xff09; 同步编程是指程…...

免费下载专利

给大家提供一个可以免费下载专利的地方 链接&#xff1a;https://www.drugfuture.com/cnpat/cn_patent.asp...

CentOS7安装流程步骤详细教程

1. 简介 1.1. 概述 CentOS 7是一款基于Red Hat Enterprise Linux(RHEL)的开源Linux发行版,它提供了一个稳定、安全、高效的操作系统,适用于企业级应用、服务器、云计算等领域。CentOS 7以其高度的稳定性和安全性而闻名,它广泛应用于各种行业和领域,包括政府、金融、医疗、…...

【大模型从入门到精通17】openAI API 构建和评估大型语言模型(LLM)应用5

这里写目录标题 理论问题&#xff1a;实践问题&#xff1a;理论实践 理论问题&#xff1a; 1.描述评估LLM应用程序输出的重要性&#xff0c;并提及至少三个维度&#xff0c;这些输出应该在这几个维度上被评估。 2.解释在评估LLM应用程序时开发稳健的性能指标的作用&#xff0c…...

苹果手机无iCloud备份下“最近删除”照片的恢复策略

iPhone最近删除清空了照片还能恢复吗&#xff1f;大家都知道&#xff0c;照片对于我们来说是承载着美好回忆的一种形式。它记录着我们的平淡生活&#xff0c;也留住了我们的美好瞬间&#xff0c;因此&#xff0c;具有极其重要的纪念价值。但由于我们的失误操作导致照片被删除&a…...

Docker搭建Minio容器

Docker搭建Minio容器 前言 在上一集我们介绍了分布式文件存储行业解决方案以及技术选型。最终我们决定选用Minio作为分布式文件存储。 那么这集我们就在Docker上搭建Minio容器即可。 Docker搭建Minio容器步骤 创建Minio文件目录 我们选择创建/minio/data目录 修改目录权…...

【C++】多源BFS问题和拓扑排序

目录 多源BFS介绍 单源BFS和多源BFS的区别 SO如何解决多源BFS问题 多源之核心 矩阵 算法思路 代码实现 飞地的数量 算法思路 代码实现 地图中的最高点 算法思路 代码实现 地图分析 算法思路 代码实现 拓扑排序介绍 有向无环图 ​编辑 如何解决这类问题 课…...

CentOS 7 安装详细教程

​ 大家好&#xff0c;我是程序员小羊&#xff01; 前言&#xff1a; CentOS 7 是一个稳定的企业级 Linux 发行版&#xff0c;广泛用于服务器环境。CentOS 7 是基于 Red Hat Enterprise Linux (RHEL) 构建的企业级 Linux 发行版&#xff0c;提供免费的、开源的操作系统&#xf…...

React hook之useRef

React useRef 详解 useRef 是 React 提供的一个 Hook&#xff0c;用于在函数组件中创建可变的引用对象。它在 React 开发中有多种重要用途&#xff0c;下面我将全面详细地介绍它的特性和用法。 基本概念 1. 创建 ref const refContainer useRef(initialValue);initialValu…...

SciencePlots——绘制论文中的图片

文章目录 安装一、风格二、1 资源 安装 # 安装最新版 pip install githttps://github.com/garrettj403/SciencePlots.git# 安装稳定版 pip install SciencePlots一、风格 简单好用的深度学习论文绘图专用工具包–Science Plot 二、 1 资源 论文绘图神器来了&#xff1a;一行…...

【HarmonyOS 5.0】DevEco Testing:鸿蒙应用质量保障的终极武器

——全方位测试解决方案与代码实战 一、工具定位与核心能力 DevEco Testing是HarmonyOS官方推出的​​一体化测试平台​​&#xff0c;覆盖应用全生命周期测试需求&#xff0c;主要提供五大核心能力&#xff1a; ​​测试类型​​​​检测目标​​​​关键指标​​功能体验基…...

el-switch文字内置

el-switch文字内置 效果 vue <div style"color:#ffffff;font-size:14px;float:left;margin-bottom:5px;margin-right:5px;">自动加载</div> <el-switch v-model"value" active-color"#3E99FB" inactive-color"#DCDFE6"…...

A2A JS SDK 完整教程:快速入门指南

目录 什么是 A2A JS SDK?A2A JS 安装与设置A2A JS 核心概念创建你的第一个 A2A JS 代理A2A JS 服务端开发A2A JS 客户端使用A2A JS 高级特性A2A JS 最佳实践A2A JS 故障排除 什么是 A2A JS SDK? A2A JS SDK 是一个专为 JavaScript/TypeScript 开发者设计的强大库&#xff…...

AI+无人机如何守护濒危物种?YOLOv8实现95%精准识别

【导读】 野生动物监测在理解和保护生态系统中发挥着至关重要的作用。然而&#xff0c;传统的野生动物观察方法往往耗时耗力、成本高昂且范围有限。无人机的出现为野生动物监测提供了有前景的替代方案&#xff0c;能够实现大范围覆盖并远程采集数据。尽管具备这些优势&#xf…...

RabbitMQ入门4.1.0版本(基于java、SpringBoot操作)

RabbitMQ 一、RabbitMQ概述 RabbitMQ RabbitMQ最初由LShift和CohesiveFT于2007年开发&#xff0c;后来由Pivotal Software Inc.&#xff08;现为VMware子公司&#xff09;接管。RabbitMQ 是一个开源的消息代理和队列服务器&#xff0c;用 Erlang 语言编写。广泛应用于各种分布…...

MFE(微前端) Module Federation:Webpack.config.js文件中每个属性的含义解释

以Module Federation 插件详为例&#xff0c;Webpack.config.js它可能的配置和含义如下&#xff1a; 前言 Module Federation 的Webpack.config.js核心配置包括&#xff1a; name filename&#xff08;定义应用标识&#xff09; remotes&#xff08;引用远程模块&#xff0…...

在鸿蒙HarmonyOS 5中使用DevEco Studio实现指南针功能

指南针功能是许多位置服务应用的基础功能之一。下面我将详细介绍如何在HarmonyOS 5中使用DevEco Studio实现指南针功能。 1. 开发环境准备 确保已安装DevEco Studio 3.1或更高版本确保项目使用的是HarmonyOS 5.0 SDK在项目的module.json5中配置必要的权限 2. 权限配置 在mo…...

yaml读取写入常见错误 (‘cannot represent an object‘, 117)

错误一&#xff1a;yaml.representer.RepresenterError: (‘cannot represent an object’, 117) 出现这个问题一直没找到原因&#xff0c;后面把yaml.safe_dump直接替换成yaml.dump&#xff0c;确实能保存&#xff0c;但出现乱码&#xff1a; 放弃yaml.dump&#xff0c;又切…...