自己在写项目中抽离的一套实现方案
针对的是较为复杂,中间逻辑会大量变化的业务背景
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两