Vue开发库存管理前端页面时一些小经验记录

原创 Fly丶 教程 vue专题 660阅读 30 天前 举报

场景是在项目中很多地方都需要用到相同的函数,例如

如果出现次数过多,会造成书写麻烦和代码复杂的情况。

解决思路:首先对函数进行抽象封装,封装后利用vue的mixin将其注入到各个vue中。

因为这里的函数是大部分组件中都可能用到的,固利用vue的全局混合。

  • 新建一个global文件:
  • 在新建Vue的原型中利用mixin混入(main.js中,创建vue实例前):
  • 任意vue中使用:

利用Vuex实现全局请求加载动画

场景是希望在所有请求的时候添加上加载动画。

首先遇到的问题是,加载动画应该挂载在哪里?某个组件中?这里需要根据具体的场景看,如果你的是多组件多页面,那么每一个全新的页面都需要添加一个加载动画,如果是一个单页面应用,可以建议添加在最外层的父组件上。例如本项目中的页面结构:

上方导航栏是在main.vue文件中

下方是整体一个retouer-view,因此我们如果需要在所有页面中添加加载动画,可以直接写在main.vue中

上方代码中用到的this.$store.state.isRequesting就是我们实现全局请求添加加载动画的核心方法:利用vuex。

首先在新建store文件夹,index.js文件:

上方代码的作用是新建了一个vuex的store,并且添加了两个变量isRequestin和isError,分别用来标记是否需要提示正在请求(加载动画),和是否请求出错(提示服务器错误),请求成功的提示场景比较多,所以需要在代码中自己实现。

记得在新建Vue实例的时候注入store:

然后需要在自己封装的请求函数中添加对这两个变量的控制,本项目中是封装的fetch.js:

然后就可以在main中实现自动提示了。

自动加载动画可以依赖ElementUI用v-loading实现:

<pre class="hljs ini">v-loading="this.$store.state.isRequesting"</pre>

服务器错误提示需要自己手动实现,这里利用了vue的computed和watch两个钩子函数:

至此,我们的请求提示封装就完成了,最终实现的效果是在任何请求发出时都会自动出现加载动画,并且在请求出错时提示服务器错误,不需要在每一个请求的时候都try..catch了。

兄弟组件通信

场景是两个不相关的组件需要通信,因为不是父子组件关系固不能利用this.$emit来传递。

固利用了vue提供的事件bus。

新建一个bus.js文件

在需要监听事件的组件中:

触发事件的组件中:

对前端技术感兴趣的同学,欢迎加入QQ群:838051760,不管你是小白还是大牛我都欢迎,还有我整理的一套高效率学习路线和教程与您免费分享,同时每天更新视频资料。

评论 ( 0 )
最新评论
暂无评论

赶紧努力消灭 0 回复