配置vuex,写个简单的示例,分别编译为微信小程序和app
查看修改vuex状态后,在util.js中是否能拿到改变后的状态
- 发布:2022-03-18 17:19
- 更新:2024-01-19 11:06
- 阅读:1977
产品分类: uniapp/App
PC开发环境操作系统: Windows
PC开发环境操作系统版本号: windows10
HBuilderX类型: Alpha
HBuilderX版本号: 3.3.8
手机系统: Android
手机系统版本号: Android 8.1
手机厂商: 华为
手机机型: 荣耀8Ccc
页面类型: vue
vue版本: vue2
打包方式: 云端
项目创建方式: HBuilderX
操作步骤:
预期结果:
app和微信小程序都能通过store.state拿到改变后的状态
app和微信小程序都能通过store.state拿到改变后的状态
实际结果:
小程序通过store.state拿到改变后的状态
app拿到的只是初始状态(最初定义的时候的状态)
小程序通过store.state拿到改变后的状态
app拿到的只是初始状态(最初定义的时候的状态)
bug描述:
在配置的某个工具js(util.js)中,使用如下代码引入vuex去,想获取到vuex的数据后使用。
import store from '@/store/index.js';
在一个界面(小程序用的是.vue,app用的是.nvue),调用this.$store.commit('**', str)去改变vuex中的某个数据后
调用util.js中的某个,获取vuex更新后的状态
console.log("设置角标这里的",store.state.message);
问题来了,编译为小程序的时候执行上面的打印,能拿到更新后的数据。
但编译为app(使用的.nvue)的时候,拿到的就是最初的默认值(连登录状态都是空的)
自学的烦恼 - 自学的烦恼
nvue里使用vuex不能像非nvue方法那样去用
例如:Vue.prototype挂载的,是这样this.$store.state去取;
用import store from '@/store/index.js',是store.state去取
但是,它们在nvue其实是不同的,用this.$store.commit去赋值,store.state取的值并不是this.$store.commit赋的值,因为store.state的值压根就没去改变。
所以要想在nvue里用vuex,在main.js引入store后,用这种uni.$store = store方法挂载上,所有页面都可以用,不管vue文件、js文件还是nvue文件都可以用uni.$store.state这种方法拿到值,而且js文件也不需要再去单独引入store文件了,赋值的话自然也要uni.$store.commit这样去用
YyJj123123 (作者)
https://ask.dcloud.net.cn/question/84077?item_id=192119&rf=false
各位大佬,这个问题似乎是陈年老bug了,我属实想不到其他方法解决了。本来就菜,还碰上了个nvue。。。求求有空帮我指点迷津
自学的烦恼
因为uni是官方的,所以直接利用官方的uni挂载上去,达到全端实现
2022-03-18 18:21
YyJj123123 (作者)
我丢,大哥的意思就是不挂载在vue的原型,直接挂在uni下面,然后js、vue、nvue都能使用了。。。。
我刚试了 确实行,谢谢大佬,真的 我整了一下午了都,压根没想过挂载Uni下面。。。
2022-03-18 18:24
YyJj123123 (作者)
太感谢了 太感谢了
2022-03-18 18:24
FireFlyTest
回复 1***@qq.com: 也不好用,不能在节点上调用uni下面的方法。比如<view @tap="uni.$app.toast('123')"></view> 这种就不行
2022-03-19 17:11
自学的烦恼
回复 9***@qq.com: 正常,因为官方他自己的都不行
2022-03-20 20:09
5***@qq.com
谢谢,解决了我的问题,uni太无语了
2022-04-23 04:07
1***@qq.com
感谢大佬,完美解决
2022-06-15 10:32
3***@qq.com
感谢感谢,阁下真乃神人也
2022-06-23 18:23
L***@126.com
2023年8月24日这个坑依然存在,按照大佬所说已经解决!
2023-08-24 21:17
Adlaw
大神6666666
2024-06-18 17:47