手机浏览 RSS 2.0 订阅 膘叔的简单人生 , 腾讯云RDS购买 | 超便宜的Vultr , 注册 | 登陆
浏览模式: 标准 | 列表分类:Javascript

vuex mutation和action的区别

Submitted by gouki on 2022, March 26, 10:46 PM

 如题，其实官网已经给出过说明，就三句话：详见（项目结构 | Vuex (vuejs.org)）

 
  1. 应用层级的状态应该集中到单个 store 对象中。
  2. 提交 mutation 是更改状态的唯一方法，并且这个过程是同步的。
  3. 异步逻辑都应该封装到 action 里面。
简单明了。

Tags: vuex

Javascript | 评论:0 | 阅读:3886

uniapp component 中的onLoad/onShow 不被触发

Submitted by gouki on 2022, March 10, 8:08 AM

 在使用UNIAPP进行开发的时候，component是经常要用到的，但在使用过程中会发现，经常用的onLoad/onShow无法被触发。而props在传进去时，data获取变量调用props时，也有延迟。

 
这时候的处理方法是参考uniapp的页面生命周期，可以看到，他本身也支持vue的各种常用方法，尝试用mounted，发现被触发了。
 
备注：created / destoryed 都能够被正常触发（这时候就不要迷信uniapp的一些用法了。）
 
至此问题解决。

Javascript | 评论:0 | 阅读:4396

uniapp点击tabbar不刷新的处理

Submitted by gouki on 2022, March 1, 10:28 PM

在使用UniApp进行小程序开发的时候，总是不可避免的会使用tabbar。在小程序中tabbar的页面和普通的页面不一样，比如，他对应的页面就始终含有tabbar，而其他页面则不显示tabbar（要显示只能用自定义组件）。而且切换页面的时候，只能用switchTab，而不能用navigateTo。

这些都是平时可以看得到和可以通过报错信息查看得到的（比如navigateTo跳到tabbar时，出错信息就是提示不能跳转到tabbar的页面）。

tabbar还有一些有意思的小特性，比如，tabbar对应的页面，不能是分包里的，只能含在主包里。tabbar打开后数据加载完，默认不再刷新。这个就带来不小的问题，比如电商的首页，加载后不刷新那就一直无法获取最新数据了。

通过查看uniapp的文档，发现App.vue除了常见的onLaunch/onShow/onHide等之外,还有什么onPageNotFound（这个平时不会触发，只有扫描、转发等才会触发，navigateTo等不会触发此事件）之类的。[应用生命周期：生命周期 - uni-app官网 (dcloud.io)]

而普通页面，常用事件就是onInit/onLoad/onShow/onHide/onUnload，除此之外还有：onResize/onPullDownRefresh/onReachBottom/onPageScroll，如果是页面点击事件，还有onTabItemTap/onShareAppMessage/onNavigationBarButtonTap/onBackPress【页面生命周期：生命周期 - uni-app官网 (dcloud.io)】

当注意到onTabItemTap事件后，就想起来，可以利用此事件进行操作：onTabItemTap(e){console.log(e);}，打印这个e，可以看到他是一个Json对象，有三个主要的key：index/pagePath/text，index是针对Tabbar的索引 ，pagePath是当前Tab的路径，text是tabbar对应的文字。

于是就可以利用这个pagePath：

JavaScript代码
  1. onTabItemTap(e){  
  2.    uni.reLaunch({url:e.pagePath});  
  3. }  

偷懒的时候就可以直接这么做。

纯记录。

Javascript | 评论:0 | 阅读:4940

uniapp创建的小程序提示文件体积超过500KB

Submitted by gouki on 2022, February 13, 9:41 PM

以前没注意过，好象也没有发生过，最近在使用UniApp创建小程序的时候，运行几下就突然出现：[JS 文件编译错误] 以下文件体积超过 500KB，已跳过压缩以及 ES6 转 ES5 的处理。

很烦人，一旦出现这个错误，tab页几乎都是正常的。但无法跳转到其他页面，出错信息是xxxxpage not registed。

在开发者工具上设置过：Es6转为Es5，不启用。uniapp的manifest.json中，对微信小程序也是设置了，上传时压缩代码，但仍然不起作用。

这时候看一下，HbuilderX的运行菜单，运行->运行到小程序模拟器->运行时是否压缩代码，如果没有打勾，就打个勾。

----网上有提示，如果用cli创建的，则需要package.json中增加：

"dev:mp-weixin": "cross-env NODE_ENV=development UNI_PLATFORM=mp-weixin vue-cli-service uni-build --watch --minimize"

--

再次运行，正常了。

Javascript | 评论:0 | 阅读:6183

ElementUI form服务端验证

Submitted by gouki on 2021, October 8, 8:36 AM

看到标题的时候，估计会很惊讶，服务端验证那不是很方便么，自定义一个rules，杀杀水就达到目标了。

事实上，我是在做一件偷懒的事情，毕竟大家都知道表单验证很多时候为了方便和节约性能，都是客户端先检验，然后再服务端检验，这样用户体验也好，但是在后台的时候，如果你要写两遍，那花的精力就大了。特别是elementUI的rules，还得写自定义的validateFunc，于是我就想着前端不校验，后端校验，然后把error回显到指定的元素上。
 
比如如果只是弹个窗，提个示，那谁都可以实现了，但如果你不能为指定元素做错误提示，那么在表单过多的情况下，用户也会很苦恼。如果表单有几十个，怎么破？
 
翻了一下elementui的form和form-item的源码，发现可以额外传递error进去。用来提示该元素出错了。error是一个string，组件中会watch，然后给validateStatus赋值error，给validateMessage赋值error对应的string。
 
于是，在submit的时候，发现有error时，可以直接this.errors = res.data.error;这时候相应的元素就会飘红。除了没有focus到第一个标红的元素上，其他一切OK
 
---
如果用的是step 表单，那要注意，如果要去不同的step，需要先设置step ，然后 在 this.$nextTick()中进行赋值。否则，页面出来了。变量会提前赋值，渲染出来的表单元素无法将error赋值进去。被这个折腾了一晚上。
 
---
用这个的好处是，只有提示，不会象他原来的rules会阻止下一步的进行。现在就感觉轻松多了。
本来是准备切到andtv的，结果 发现elementUI的2.15，把andtv中的几个额外的组件也加全了。比如description-item和 骨架屏。。确实666
 
----
再忍忍，现在还得用VUE2.。。。
 

Javascript | 评论:0 | 阅读:4944

Records:305‹12345678910›»