[vue] vue+vuex实现flux架构 vue+vuex+service+proxy分层

本文介绍了在复杂业务背景下,如何利用vue+vuex实现flux架构,并通过service和proxy进行分层处理。vue文件仅包含UI操作,vuex管理交互数据,action抽象操作行为。进一步地,service层负责数据逻辑组装,proxy层封装底层请求。通过这样的分层设计,提高了代码的可维护性和扩展性。

摘要生成于 C知道 ,由 DeepSeek-R1 满血版支持, 前往体验 >

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

git的demo过两天弄下
后续会持续根据在项目中遇到的问题改进和更新

vue+vuex实现flux

传统flux架构结构

结构

  1. vue文件中的数据交互操作抽离,只包含ui操作及不需要进行数据操作的state(View);
  2. vuex中保存有所有的交互数据以及操作动作(Store与Action);
  3. vue文件与vuex之间通过computed进行连接(bind);
  4. vue文件通过store.commit与store.dispatch调用vuex方法(Dispatcher)。
    vue采用双向数据流,比react的单向数据流写法简单,但可能会造成状态的难以管理追踪,在使用时需要注意。在框架中,可以在computer中通过深拷贝实现store数据与view数据的双向绑定解除,实现单项数据流

action

与传统使用vuex的方式不同,在框架中将所有的数据交互操作抽象为action,一个操作行为对应一个action
一个行为可能还是由多个内部动作(操作行为)组合而成,因此可以调用其他的action继续操作。例如,一个edit操作分为连个子操作行为:提交数据,获取数据。
一个操作行为应有一个针对的action,而不应该因为接口是同一个就合并。例如,新增操作与编辑操作常使用同一个接口,但在定义时应定义add与edit两

评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值