谈谈对Vuex的理解,初学者快速掌握Vuex

初始vuex

     初学vue的时候,弄了一个列表页,点击列表跳转详情页.在此过程中,学会了同一页面函数如何传参数.使用meta,query页面传参.接着,自己尝试封装简单的组件,了解子父组件间是如何传餐.当子组件的一些操作需要修改父组件某些数据时,难道每次都要$emite?如果是跨多个组件,跨多个页面呢?

跨页面,跨组件传值的解决方案

• localStorage
  • key-value的方式存储,永久存储,除非手动删除
• sessionStorage
  • 与localStrorage类似,关闭页面后数据会丢失
• eventBus
  • 观察者模式,先on,emit后拿到数据,必要的时候需要off.类似与iOS的通知.
• Vuex
  • 使用较繁琐,初学者一看,会惊叹这是什么鬼!一般用于较大型的项目.

vuex的使用套路,看一看就会用

• state:{} state中声明并初始化变量
• actions:{} (mutations之前执行的操作),执行 异步,或者同步操作后,提交到mutation中去.
• mutations:{} 将action中提交的数据,可进行相应的处理同步到state中
• getters:{} 类似于iOS中getter方法,重写model中属性的getter方法,比如说time时间戳,处理成大于1小时等操作. 相当于state中的计算属性,对相关数据进行处理,返回 新 的数据. 这样做对好处,相当于 抽离出部分逻辑到modal层,减少control层对逻辑,让control代码更加简洁.view和 model 更加分离.