MapState无法访问到store中的state

最新推荐文章于 2024-05-01 11:36:48 发布
最新推荐文章于 2024-05-01 11:36:48 发布
阅读量836 收藏 1
点赞数
分类专栏： 报错文档 文章标签： vue.js javascript 前端
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.youkuaiyun.com/qq_53523338/article/details/125016201
版权
本文介绍了一个在Vue项目中遇到的隐藏bug——嵌套文件夹导致的数据获取失败问题。通过调整项目结构，在store中创建新的Home文件夹成功解决了该问题。

摘要生成于 C知道 ，由 DeepSeek-R1 满血版支持， 前往体验 >

在我这个项目而言，我算是碰到这个隐藏bug了，找了有一会

关于嵌套文件夹的问题

项目结构

在这里插入图片描述

在这里插入图片描述
很不幸 undefined 获取不到数据
在这里插入图片描述

这时候在store中新建一个Home文件夹，就可以完美的解决这个问题

在这里插入图片描述

在这里插入图片描述

问题就解决了
在这里插入图片描述

可能是我没咋仔细看文档，也有可能是个vue和我开个潜在的玩笑吧，反正解决，给兄弟们避雷 ，解决了点个赞再走吧哈哈哈哈

解决mpvue + vuex 开发微信小程序vuex辅助函数mapState、mapGetters不可用问题.doc
05-18
例如，mapState可以让我们通过一个简短的语法来映射state的一部分到组件的计算属性，而mapGetters则将getters转换为计算属性，这样在组件中可以直接使用，无需每次都通过`this.$store.getters`调用。mapMutations和...
解决VUEX的mapState/…mapState等取值问题
11-20
通过这种方式，组件可以直接通过`this.showLoadingX`访问到store中的状态，而无需每次手动调用`this.$store.getters.getStore.showLoadingX`，使代码更加简洁和易读。 类似地，`mapMutations`和`mapGetters`也提供...
解决VUEX的mapState/...mapState等取值问题
10-15
主要介绍了解决VUEX的mapState/...mapState等取值问题，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧
vuex mapState无法获取数据但mapGetters可以获取 多模块
weixin_48091908的博客
01-18 821
vuex mapState无法获取数据但mapGetters可以获取 多模块
react-redux 之 connect mapStateToProps 测试数据无效的解决
weixin_40990757的博客
01-29 657
首先明确mapStateToProps中有参数有两种形式 一个参数--store state 调用情况：store的state改变时 两个参数--store state和the wrapper componnet's props 调用情况：1.store的state改变时 2.当被包装的component接收新的state时 然后明确mapStateToProps中返回值会被合并到被...
关于vue2使用vuex获取不到state之类的错误
maybeshewill的博客
11-25 2858
虽然最近几乎每天出错点，今天还是觉得不吐不快。报了这个错误Cannot read properties of undefined (reading ‘state’)，百度的时候一个方法都没用但是学到了很多奇怪的出错点（）
uniapp vuex 使用mapState调用取不到值。
Leonardo_zhang的博客
06-24 6506
uniapp vuex 使用mapState调用取不到值。 uni-app自带vuex，所以正确引入即可。 1、新建uniapp项目时，根目录会自动创建store文件夹存放vuex 2、手动创建index.js import Vue from 'vue' import Vuex from 'vuex' //挂载Vuex Vue.use(Vuex) //创建VueX对象 const store = new Vuex.Store({ state: { //全局变量定义处 uerInfo: {},
vuex state及mapState的基础用法详解
08-27
这样，我们可以在组件中访问状态的值，而不需要手动地将状态对象的属性一一映射到组件中。 使用 MapState 的优点 使用 MapState 有以下几个优点： * 简化代码：MapState 可以帮助我们简化代码，减少重复的代码。 ...
详解Vuex中mapState的具体用法
08-29
mapState是Vuex提供的一个辅助函数，用于将store中的状态映射到组件的计算属性中。在本文中，我们将详细介绍mapState的用法和原理。 首先， lets看一个示例代码： ```javascript import Vue from 'vue' import ...
vuex的新写法引入mapState省略$store.state
YY的博客
12-09 1387
vuex的新写法引入mapState省略$store.state
解决Vue 给mapState中定义的属性赋值报错的问题
11-20
1. 实践环境 Vue 2.9.6 2. 问题描述 [removed] import { mapState } from 'vuex'; export default { name: "displayCount", computed: { ...mapState({ ...略 count: state => state.a.count }) }, methods: { increaseCount () { this.count = this.count + 1 } } }; [removed] <style> </style> 如上，我们希望在执行i
vuex mapstate 取值报错 undefined
最新发布
2301_78528635的博客
05-01 205
改这种形式试一试。
Vuex中的state,mapState,...mapState
lucky__peng的博客
03-16 722
1.state   state是什么?   定义:state(vuex) ≈ data (vue)   vuex的state和vue的data有很多相似之处,都是用于存储一些数据,或者说状态值.这些值都将被挂载 数据和dom的双向绑定事件,也就是当你改变值的时候可以触发dom的更新.   虽然state和data有很多相似之处,但state在使用的时候一般被挂载到子组件的computed计算属性上,这样有利于state的值发生改变的时候及时响...
mapState获取的数据报错 TypeError: Cannot read properties of undefined (reading ‘cartInfoList‘)
的博客
10-01 1012
mapState获取的数据报错 TypeError: Cannot read properties of undefined (reading 'cartInfoList')
Vue3 直接使用Vuex的mapState和mapGetters时报错的分析及解决方案
haoduoyu2099的博客
11-28 6038
Vue3 组合式(setup)关于mapState和mapGetters直接使用会因为computed中没有this而报错，故而对其重新封装，给每个mapState和mapGetters返回的每个函数都绑定一个store对象
用vuex mapState时新写法会出现的错误和注意事项（渲染不出来页面的原因）
YY的博客
12-09 462
用vuex mapState时新写法会出现的错误和注意事项（渲染不出来页面的原因）
vuex中通过computed赋值遇到的一个对象展开符...mapState
m0_70627393的博客
12-24 872
对象展开符...，...mapState可以把自身对象的属性和别的对象的属性融合成一个对象，当要进行对象合并的时候，对象前面都要加...
Vuex $store.state的值能获取，但是里面具体的值却获取不到
棠樾的博客
01-13 7558
问题： 打印this.$store.getters可以获取的到，但是打印this.$store.getters.authInfo就是undefined console.log(this.$store.getters,'是否登录') console.log(this.$store.getters.authInfo,'是否登录') 原因： 因为actions是异步操作，你在commit方法里再去打印肯定就有值了 为什么对象能打印到？因为对象那个变量是地址，你展开的时候对象已经扩充了，所以能看到。
Vuex store 辅助函数 访问state
05-18
在使用 Vuex 时，我们可以使用辅助函数来访问 store 中的 state。常用的辅助函数有： - mapState：将 store 中的 state 映射到组件的计算属性中； - createNamespacedHelpers：创建一个与指定命名空间相关的辅助函数集合。 下面是具体的用法： ### 1. mapState `mapState` 函数接收一个字符串数组或对象，每个字符串对应 state 中的一个属性名，或者是一个对象，对象的键名表示在组件中使用的名称，键值表示 state 中对应的属性名。 ```js import { mapState } from 'vuex' export default { computed: { ...mapState([ 'count' // 映射 this.count 为 store.state.count ]), ...mapState({ // 映射 this.count2 为 store.state.count count2: 'count' }) } } ``` ### 2. createNamespacedHelpers `createNamespacedHelpers` 函数接收一个命名空间字符串，返回一个对象，包含了以下四个辅助函数： - mapState：映射 state 到组件的计算属性中； - mapGetters：映射 getters 到组件的计算属性中； - mapMutations：映射 mutations 到组件的 methods 中； - mapActions：映射 actions 到组件的 methods 中。 ```js import { createNamespacedHelpers } from 'vuex' const { mapState } = createNamespacedHelpers('myModule') export default { computed: { ...mapState([ 'count' ]) } } ``` 以上是辅助函数访问 Vuex store 中 state 的用法。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值