Vuex

  说起vuex呢,对这个流程只是有个大概的认识,因为项目相对都不是很大,所以都使用了替代方案来共享数据,比如 EventBus或者 通过vue.observe来简易的共享数据。

observe用起来呢确实很方便,没有vuex那么多的流程,比较简单,但是不能通过vue-devtool来跟踪数据,这是比较蛋疼的。

  还是说说vuex吧,对一个东西的认知呢总是遵循一个螺旋上升的曲线,最开始,觉得,又是actions,又是mutations,完全懵逼,但是后来想想,这就是人家的流程规矩,包含了设计者自己的考量了思考,也是有道理的,

  贴一张自己画的图,这里面就画的比较清楚了,淡然,其实和官方的图也没啥差别,具体里面的那些用法,还是得遵照官网来

  

 

其实想法是比较简单的,数据沿着一个固定的环路来获取和更新,然后引出了vuex中的很多概念。比如store

store就是一个对象,里面包含四个对象,对吧,基本就是这么个结构

1 var store={
2   const state={}  
3   const mutation={}
4   const actions={}
5   const getters={}      
6 }

说来惭愧,在写这篇文章的时候,其实是没咋用过vuex的,文档倒是看了几遍,但是纸上得来还是浅啊,就是得自己在实际中用起来,才能了解的更多。

事实上,自己之前的项目其实一直都不算大,很多时候用个eventBus就够了,后来发现还有vue.observe这个api,就更觉得不需要vuex了,但是当我自己搞了个稍微复杂点的项目,并且没有用到vuex,最近在看项目,感觉完全看不懂了,之前写的什么狗屎啊,消息到处发送,接收,最后也不知道到底从哪儿接收的数据,从哪儿发送的数据了,使用observe这个呢,就是没有devtool那样的工具来查看数据,也不够方便,特别是大量异步数据的存储问题,真是要了老命了,看来vuex是不得不上了。

说说自己的感受把,异步请求数据,放在actions里面,然后通过 mapActions这个工具方法引入到具体组件中,当然actions里面的异步方法也可以通过promise将结果返回出去,这样,在使用actions的方法时可以通过then方法拿到结果。

还有就是vuex里面储存的数据,在切换tab的时候,可能会出现数据残留的现象,就是说新数据还没请求回来,导致store里面的数据没更新,此时页面显示的就是旧的数据了,其实此时可以通过加个loading蒙版之类的去规避。、

最后,当然还有数据持久化了,思路其实也简单,就是将数据存储在本地,localStroage或者sessionStroage,当然也可以使用一些插件。 

 

posted @ 2019-10-13 22:59  yang_nick  阅读(180)  评论(0编辑  收藏  举报