本文介绍了在复杂业务背景下，如何利用vue+vuex实现flux架构，并通过service和proxy进行分层处理。vue文件仅包含UI操作，vuex管理交互数据，action抽象操作行为。进一步地，service层负责数据逻辑组装，proxy层封装底层请求。通过这样的分层设计，提高了代码的可维护性和扩展性。
自己在写项目中抽离的一套实现方案
针对的是较为复杂，中间逻辑会大量变化的业务背景
git的demo过两天弄下
后续会持续根据在项目中遇到的问题改进和更新
vue+vuex实现flux
结构
- vue文件中的数据交互操作抽离，只包含ui操作及不需要进行数据操作的state（View）；
- vuex中保存有所有的交互数据以及操作动作（Store与Action）；
- vue文件与vuex之间通过computed进行连接（bind）；
- vue文件通过store.commit与store.dispatch调用vuex方法（Dispatcher）。
vue采用双向数据流，比react的单向数据流写法简单，但可能会造成状态的难以管理追踪，在使用时需要注意。在框架中，可以在computer中通过深拷贝实现store数据与view数据的双向绑定解除，实现单项数据流
action
与传统使用vuex的方式不同，在框架中将所有的数据交互操作抽象为action，一个操作行为对应一个action
一个行为可能还是由多个内部动作（操作行为）组合而成，因此可以调用其他的action继续操作。例如，一个edit操作分为连个子操作行为：提交数据，获取数据。
一个操作行为应有一个针对的action，而不应该因为接口是同一个就合并。例如，新增操作与编辑操作常使用同一个接口，但在定义时应定义add与edit两
最低0.47元/天 解锁文章
扫一扫
1267
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
