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

Vue项目中Vuex在util引入，断点存在default

news 来源：原创 2025/7/2 23:26:46

示例代码

// src/store/index.js
import Vue from 'vue';
import Vuex from 'vuex';
……Vue.use(Vuex);
export default new Vuex.Store({……
})

// src/utils/index.js
import store from '@/store' // 导入默认导出的 store
export async function getDict() {store.state.userInfostore.dispatch.saveDictData(dictData)
}

使用断点查看的时候store属性中存在default，如图：
在这里插入图片描述

1. 为什么 `store.state` 能访问到数据？

在 Vuex 中，new Vuex.Store() 创建的实例会 自动挂载 state 到根级别，即使你在代码中看到的是 export default 导出整个 Store 实例。
当你使用 import store from '@/store' 时，导入的其实是这个 Store 实例，而 state 是它的一个直接属性。

Store 实例的真实结构

// 通过 console.log(store) 查看实际结构
{state: { ... },      // 直接访问的状态树getters: { ... },    // 计算属性commit: fn,          // 调用 mutations 的方法dispatch: fn,        // 调用 actions 的方法// ... 其他内部属性
}

所以 store.state 是合法的访问方式，无需通过 default。

2. 为什么断点调试时看到的是 `default`？

这是 开发工具（如 Chrome DevTools）的显示问题：

当你在调试工具中查看 import store from '@/store' 时，工具会显示模块的默认导出（export default）为 default 属性。
但实际上，store 变量已经指向了 default 的内容（即 Store 实例），所以直接访问 store.state 是等效的。

示意图

// 实际导入后的 store 变量：
store = {state: { ... },      // 直接可用getters: { ... },// ...
}// 调试工具可能显示为：
store = {default: {           // 这是模块的默认导出包装state: { ... },getters: { ... },// ...}
}

但 代码中直接写 store.state 仍然有效，因为 store 已经是解引用后的对象。

3. 正确访问方式

情况 1：直接访问 State

import store from '@/store'// 正确：直接访问 store.state
const dictData = store.state.userInfo

4. 常见误区

错误尝试

// ❌ 错误！不需要通过 default
const dictData = store.default.state.userInfo

这种写法仅在调试工具中看到的结构里有效，实际代码中会报错。

为什么会混淆？

开发工具的显示可能让人误解需要访问 default，但 Babel/Webpack 在编译时已经处理了 export default 的引用。

总结

你看到的（调试工具）	实际代码中的写法
`store.default.state`	`store.state`
这是模块导出的显示	直接访问实例属性

关键点：

import store from '@/store' 已经解引用了 default，直接使用 store 即可。
state 是 Store 实例的直接属性，无需深层访问。
调试工具的显示可能具有误导性，以代码实际行为为准。

Vue项目中Vuex在util引入，断点存在default

示例代码 // src/store/index.js import Vue from vue; import Vuex from vuex; ……Vue.use(Vuex); export default new Vuex.Store({…… })// src/utils/index.js import store from /store // 导入默认导出的 store export async function getDict() {store.state.userInf…...

编程日记 2025/7/2 23:26:46

2025宁德时代测评Verify考什么？网申测评如何通过SHL笔试｜附真题线上笔试考点、高分攻略、CATL新能源科技SHL测评宁德社招题目、面试攻略、求职建议

——职小豚带你拆解新能源巨头招聘密码一、宁德时代：新能源赛道「超级独角兽」作为全球动力电池龙头，宁德时代（CATL）的江湖地位无需多言： 技术硬实力：麒麟电池、钠离子电池、无钴电池等黑科技加持&…...

编程日记 2025/7/1 12:36:03

谈谈常见的数据结构（如数组、链表、栈、队列、哈希表、树、图）及其应用场景

一、数组（Array） 定义：连续存储相同类型数据的线性结构，支持随机访问。应用场景：列表渲染、数据缓存、算法处理代码示例： // 数组基本操作 const arr [1, 2, 3, 4]; arr.push(5); // O(1) 平均时间复杂…...

编程日记 2025/6/29 5:48:18

【＜二＞丹方改良：Spring 时代的 JavaWeb】之 Spring Boot 中的 AOP：实现日志记录与性能监控

答应我，这篇一定要看到最后~！ <前文回顾> 点击此处查看合集 https://blog.csdn.net/foyodesigner/category_12907601.html?fromshareblogcolumn&sharetypeblogcolumn&sharerId12907601&sharereferPC&sharesourceFoyoDesigner&a…...

编程日记 2025/6/28 7:11:34

【算法】快速幂

一、概念快速幂是一种高效的指数运算，当指数范围过大时，通过位运算能够减少大量的计算次数对于，我们通过将指数b转化为二进制数，就可以将分解为许多的（其中i是指数b中对应位为1的位数） 例如&#xff0…...

编程日记 2025/6/28 1:28:59

使用卷积神经网络识别MNIST数据集

卷积神经网络卷积神经网络本质是共享权重稀疏链接的全连接网络编写步骤构建一个神经网络，步骤是几乎不变的，大概有以下几步准备数据集 #更高级的CNN网络 import torch import torch.nn as nn import torch.nn.functional as F import torchvisi…...

编程日记 2025/7/3 12:00:56

JavaScript 中数组增删改查

在 JavaScript 中，数组是一种用来存储不同类型的值的数据结构。增加数组元素： let arr = [1, 2, 3];// 在数组末尾添加元素 arr.push(4); console.log(arr); // [1, 2, 3, 4]// 在数组开头添加元素 arr.unshift(0); console.log(arr); // [0, 1, 2, 3, 4]// 在指定位置插…...

编程日记 2025/6/28 1:24:50

【Kettle安装】Kettle安装过程, 电脑已安装java23,安装Kettle 出现报错:尝试启动 Java 虚拟机（JVM）时失败解决方法

Kettle安装 Kettle 通常指的是 Pentaho Data Integration (PDI)，这是一款开源的 ETL（Extract, Transform, Load）工具，用于数据集成、数据清洗和数据分析。它的核心工具名为 Spoon，但整个项目常被直接称为 Kettle 数据…...

编程日记 2025/6/29 20:26:09

Spring笔记04-注解注入

1.导入包 <dependency><groupId>org.springframework</groupId><artifactId>spring-beans</artifactId><version>5.2.7.RELEASE</version></dependency><dependency><groupId>org.springframework</groupId>…...

编程日记 2025/7/3 15:00:29

[动规19] 最大子数组和

目录 1. 题意 2. 思路 2.1. 状态表示 2.2. 状态转移方程 2.3. 初始化 2.4. 填表顺序 2.5. 返回值 3. 编码 1. 题意链接: 53. 最大子数组和 - 力扣（LeetCode） 题目给你一个整数数组 nums ，请你找出一个具有最大和的连续子数组&…...

编程日记 2025/7/2 19:13:10

2024年零知识证明(ZK)研究进展

Sumcheck 整个领域正在转向更多地依赖于 Sumcheck Protocol Sumcheck是用于验证多项式承诺的协议，常用于零知识证明（ZKP）中，尤其是在可验证计算和扩展性上。它的主要目的是通过对多项式进行分段检查，从而保证某个多项…...

编程日记 2025/7/3 1:21:57

1. 两数之和

leetcode Hot 100系列文章目录一、核心操作二、外层配合操作三、核心模式代码总结一、核心操作使用map，key作为数值，value作为下标先寻找对应的目标值，如果找到了则直接返回，否则在往map中插入提示：小白个人理…...

编程日记 2025/7/3 11:17:31

【电动汽车再生制动控制技术（万字长文，图文并茂）】

电动汽车再生制动控制系统概述电动汽车再生制动的基本原理是:通过具有可逆作用的电动机/发电机来实现电动汽车动能和电能的转化。在汽车减速或制动时，可逆电机以发电机形式工作，汽车行驶的动能带动发电机将汽车动能转化为电能并储存在储能器(蓄电池或超级电容器)中；在汽车…...

编程日记 2025/7/3 13:55:19

python实现股票数据可视化

最近在做一个涉及到股票数据清洗及预测的项目，项目中需要用到可视化股票数据这一功能，这里我与大家分享一下股票数据可视化的一些基本方法。股票数据获取目前，我已知的使用python来获取股票数据方式有以下三种: 爬虫获取，实现…...

编程日记 2025/7/3 14:48:33

2025年湖南建筑安全员 C1考证刷题题库

湖南建筑安全员 C1 类的练习题： 1、塔机的拆装作业必须在白天进行，不得在（ ）情况下进行。 A. 夜间 B. 大风 C. 浓雾 D. 以上都是答案：D 2、采用钢筋混凝土灌注桩时，开挖标准是桩身混凝土达到&#…...

编程日记 2025/7/3 14:51:16

【Feign】⭐️使用 openFeign 时传递 MultipartFile 类型的参数参考

💥💥✈️✈️欢迎阅读本文章❤️❤️💥💥 🏆本篇文章阅读大约耗时三分钟。 ⛳️motto：不积跬步、无以千里 📋📋📋本文目录如下：🎁🎁&a…...

编程日记 2025/7/3 14:11:36

ToolsSet之：梯度色板

ToolsSet是微软商店中的一款包含数十种实用工具数百种细分功能的工具集合应用，应用基本功能介绍可以查看以下文章： Windows应用ToolsSet介绍https://blog.csdn.net/BinField/article/details/145898264 ToolsSet中Media菜单下的“Gradient Palette”工…...

编程日记 2025/6/29 5:50:34

Apache Hive和Snowflake的`CREATE VIEW`语法和功能特性整理的对比表

写一个Apache Hive中CREATE VIEW语句转换为对应Snowflake中CREATE VIEW语句的程序，现在需要一个根据功能的相似性对应的Apache HiveQL和Snowflake SQL的CREATE VIEW语句的表。以下是基于Apache Hive的CREATE VIEW语法规则构造的所有可能合法语句实例及其功能说明&…...

编程日记 2025/7/3 15:15:45

【测试】每日3道面试题 3/31

长期更新，建议关注收藏点赞。单元测试策略有哪些，主要内容。白盒测试黑盒测试基于异常和边界的测试主要内容：测试用例设计、执行、结果分析、自动化beta测试和alpha测试主要区别主要区别：测试环境测试者 alphabeta时间先后测…...

编程日记 2025/6/28 5:13:26

用 Hugging Face Spaces 打造哪吒的 3D 模型：完整指南

引言： 哪吒，这位中国神话中的传奇人物，以其独特的形象和故事深受人们喜爱。如今，通过 Hugging Face Spaces 提供的 TripoSG 工具，我们可以轻松创建哪吒的 3D 模型。以下是详细步骤，帮助你将这个神话角色带入…...

编程日记 2025/7/2 3:59:54

鸿蒙应用元服务开发-Account Kit概述

Account Kit（华为账号服务）提供简单、快速、安全的登录功能，让用户快捷地使用华为账号登录元服务。用户授权后，Account Kit可提供头像、手机号码等信息，帮助元服务更了解用户。Account Kit提供的SampleCode示例工程体现…...

编程日记 2025/7/2 4:24:10

美团小程序 mtgsig1.2 拼好饭案例分析 mtgsig

声明本文章中所有内容仅供学习交流使用，不用于其他任何目的，抓包内容、敏感网址、数据接口等均已做脱敏处理，严禁用于商业用途和非法用途，否则由此产生的一切后果均与作者无关！ 逆向分析美团网页、小程序、app全是指…...

编程日记 2025/6/28 5:10:18

hadoop集群和常用命令

Hadoop集群的搭建与管理 1. HADOOP简介 Hadoop 是一种用于大规模数据处理的大数据框架，支持通过简单编程模型实现跨计算机集群的数据分布存储和计算3。 2. HADOOP集群部署过程 (1) 解压并安装HADOOP 在虚拟机环境中，可以通过解压缩方式完成Hadoop的安…...

编程日记 2025/7/2 19:12:07

爬虫：基本流程和robots协议

基本流程： 1.确认目标：url:www.baidu.com 2.发送请求：发送网络请求，获取到特定的服务端给你的响应 3.提取数据：从响应中提取特定的数据 4.保存数据：本地(html,json,txt)，数据库获取到的响应…...

编程日记 2025/6/28 5:19:01

python之三种去重方法

1. 数据读取与参数解析代码片段 detail pd.read_csv(detail.csv, index_col0, encodinggbk)数据实例参数详解 index_col0： 作用：将第1列设置为索引其他选项： None：不指定索引列（默认）列序号/列名&…...

编程日记 2025/6/28 5:25:43

QML输入控件: TextField（文本框）的样式定制

目录引言示例简介示例代码与关键点示例1：基础样式定制示例2：添加图标示例3：交互式元素（清除按钮） 实现要点总结完整工程下载引言在Qt Quick应用程序开发中，文本输入是最常见的用户交互方式之一。TextFi…...

编程日记 2025/6/28 2:24:29

Visual Studio | 性能探测器

文章目录一、性能探测器1、核心功能2、数据采集3、数据分析3.1、CPU分析前言： Visual Studio（VS）提供的性能探测器（Performance Profiler）是一款强大的工具，它能够帮助开发者分析应用程序的性能&#xff…...

编程日记 2025/7/3 4:13:02

数据库中的函数：高效操作与灵活运用

数据库中的函数：高效操作与灵活运用在数据库开发过程中，函数是常用的工具，可以帮助我们更高效地处理和操作数据。无论是对字符串、数值、日期还是流程控制，数据库函数都能够提供强大的支持。本文将深入探讨常见的数据库函数&…...

编程日记 2025/6/28 1:30:04

《非暴力沟通》第十二章 “重获生活的热情” 总结

《非暴力沟通》第十二章 “重获生活的热情” 的核心总结： 本章将非暴力沟通的核心理念延伸至生命意义的探索，提出通过觉察与满足内心深处的需要，打破“义务性生存”的桎梏，让生活回归由衷的喜悦与创造。作者强调，当行动…...

编程日记 2025/7/2 1:36:13

C++位运算精要：高效解题的利器

引言在算法竞赛和底层开发中，位运算（Bit Manipulation）因其极高的执行效率而广受青睐。它能在O(1)时间复杂度内完成某些复杂操作，大幅优化程序性能。本文系统梳理C位运算的核心技巧，涵盖基础操作、经典应用、优化策略…...

编程日记 2025/7/3 1:11:53

从两种遍历方法中构造二叉树

从前序与中序遍历序列构造二叉树题目描述代码实现 class Solution { private:unordered_map<int, int> mapIn;TreeNode* dfs(vector<int>& preorder, vector<int>& inorder, int pre_left, int pre_right, int in_left, int in_right){//出口if(…...

编程日记 2025/7/2 23:24:29

【C语言】字符函数的易错点及其模拟实现

在上一章为大家简单介绍了字符函数的种类和基础运用，语法。那么在本章为大家分享一些易错点和自己如何编写一个自定义函数来实现相同的作用。（点个关注呗） 一strlen：计算字符串长度 1. 函数原型 size_t strlen(const char *str…...

编程日记 2025/6/28 1:25:00

【前端】创建一个vue3+JavaScript项目流程

1、检查node和npm是否安装，查看版本： node -v npm -v 2、安装脚手架cli或vite （1）cli 安装：npm install -g vue/cli 检查是否安装成功：vue -v 使用cli创建项目：vue create my-project(项目名)--…...

编程日记 2025/6/29 13:50:17

JVM面试专题

目录 1 JVM组成 1.1 JVM由那些部分组成，运行流程是什么？ 1.2 什么是程序计数器？ 1.3 你能给我详细的介绍Java堆吗? 元空间(MetaSpace)介绍 1.4 什么是虚拟机栈 1.5 方法区 1.5.1 概述 1.5.2 常量池 1.5.3 运行时常量池 1.6 你听过…...

编程日记 2025/6/30 8:21:44

齐次线性方程组及python求解

齐次线性方程组的概念齐次线性方程组是指所有常数项都为零的线性方程组，其一般形式为： a 11 x 1 a 12 x 2 ⋯ a 1 n x n 0 a_{11}x_1 a_{12}x_2 \cdots a_{1n}x_n 0 a11x1a12x2⋯a1nxn0 a 21 x 1 a 22 x 2 ⋯ a 2 n x n 0 a_…...

编程日记 2025/7/3 15:25:14

鸿蒙前后端项目源码-点餐v3.0-原创!原创!原创!

鸿蒙前后端点餐项目源码含文档ArkTS语言. 原创作品.我半个月写的原创作品，请尊重原创。原创作品，盗版必究！！！！ 原创作品，盗版必究！！！！ 原创作…...

编程日记 2025/7/3 1:09:17

【数据结构】算法效率的双刃剑：时间复杂度与空间复杂度

前言在算法的世界里，效率是衡量算法优劣的关键标准。今天，就让我们深入探讨算法效率的两个核心维度：时间复杂度和空间复杂度，帮助你在算法设计的道路上更进一步。一、算法效率：衡量算法好坏的关键算法的效率主要…...

编程日记 2025/7/3 1:16:42

Linux | I.MX6ULL 终结者底板原理图讲解(5)

01 USB 转串口电路 I.MX6ULL 终结者开发板板载了一个 USB 串口，原理图如图 1 和图 2 所示： USB 转串口我们使用的是 CH340G 芯片，该芯片是由南京沁恒微电子研发生产的一款国产芯片。CH340G的工作电压支持 3.3V、5V，甚至是 3V，从上图可以看到我们给 CH340G 的电压是 5V…...

编程日记 2025/7/3 4:22:08

java拆分字符串、去重并统计相关长度

java拆分字符串、去重并统计相关长度 20250331 19:52 求取逗号隔开的字符串的的长度，要求去重。拆分字符串应该是指按照某种分隔符将字符串分割成多个部分，然后去除重复的部分，最后统计处理后各个部分的长度或者总长度。这时候可能需要明确…...

编程日记 2025/7/3 15:13:57

Vue 2 和 Vue 3 有什么区别

Vue 2 和 Vue 3 是 Vue.js 框架的两个主要版本，它们在核心特性、性能、API 设计等方面有一些显著的区别。以下是它们的主要区别： 1. 核心特性 • Composition API： • Vue 3 引入了 Composition API，这是一种新的 API&#xff0…...

编程日记 2025/6/30 20:06:19

RabbitMQ、RocketMQ 和 Kafka 的消息特性对比

以下是 RabbitMQ、RocketMQ 和 Kafka 在保证消息不丢失、消息顺序、消息幂等性以及快速处理积压方面的详细对比： 1. 消息不丢失特性RabbitMQRocketMQKafka生产者端开启事务或 Confirm 模式使用事务消息机制设置 acksall 确保消息被所有副本确认服务端消息持久化&…...

编程日记 2025/6/29 10:55:37

Logback 实现不同包的日志记录到不同文件

核心通过合理配置多个 appender 来定义不同的日志输出目的地通过 logger 元素将不同的包与对应的 appender 关联起来同时利用 additivity 属性控制日志的传递，从而实现精准的日志输出管理。 additivity 属性控制日志传递： additivity 属性决定了该 l…...

编程日记 2025/7/2 19:13:01

【附JS、Python、C++题解】Leetcode面试150题（11）H指数

一、题目 274. H 指数给你一个整数数组 citations ，其中 citations[i] 表示研究者的第 i 篇论文被引用的次数。计算并返回该研究者的 h 指数。根据维基百科上 h 指数的定义：h 代表“高引用次数” ，一名科研人员的 h 指数是指他&#xf…...

编程日记 2025/7/2 4:20:28

C++第13届蓝桥杯省b组习题笔记

1.九进制转十进制九进制正整数 (2022)9转换成十进制等于多少？ 第一位乘9的0次方，第二位乘9的1次方，第三位乘9的二次方以此类推 #include <iostream> using namespace std;int main() {// 请在此输入您的代码int t2022;int res0;int c…...

编程日记 2025/6/30 10:26:42

【学Rust写CAD】19 颜色渐变定义（gradient_stop.rs）

源码 //color/gradient_stop.rs use super::argb::Color; #[derive(Clone, Copy, Debug)] pub struct GradientStop {pub position: f32,pub color: Color, }代码分析这段代码是一个结构体（struct），并为其派生（derive&#xff…...

编程日记 2025/7/3 8:57:57