派发器抽离vue2单组件中的大量逻辑技巧_vue.js_

概述

在vue2当中，我们写的逻辑都是options配置对象，比较固定的写法，方法，数据，都对应到各自的配置项当中，但是当一个组件的逻辑变得更加复杂，逻辑也越来越多的时候，这时候，我们一个组件避免不了要写大量的逻辑代码，在2版本中，使用官方推荐的mixin可以解决一个组件逻辑过多的问题，现在记录我在工作用用到的另外方法。

本质

在react中，我们使用redux，会接触到对应的action，reducer,dispatch等等，通过派发对应事件类型，然后触发对应逻辑修改，有点像发布订阅，哈哈，在这里，借鉴react当中使用redux的思路，记录vue2当中抽离逻辑代码的技巧。

具体实现

举例就拿最经典的toodList来举例

• .components/ToodList/ToodList.vue

• .components/ToodList/ToodListItem.vue

.components/ToodList/hook文件下：

• actionTypes.js

//主要定义时间触发的类型常量 export const ACTION_TYPES = { del: "DEL", add: "ADD", }; 

.components/ToodList/hook文件下：

• actionTypes.js

//派发器，通过action找到对应的事件处理逻辑，然后触发 import { addTood, removeTood } from "./toodReducer"; import { ACTION_TYPES } from "./actionTypes"; //接收参数，vue组件上下文对应 export default function (ctx) { function dispatch(args) { const { type, payLoad } = args; //根据行为，触发reducer中的对应逻辑 switch (type) { case ACTION_TYPES.del: removeTood.bind(ctx)(payLoad); break; case ACTION_TYPES.add: addTood.bind(ctx)(payLoad); break; default: break; } } //返回绑定组件实例的函数 return dispatch.bind(ctx); } 

.components/ToodList/hook文件下：

• toodReducer.js

//主要事件处理逻辑文件（对应vue组件中的一个个method方法） //添加一个tood export function addTood(value) { const toodListItme = { title: value, complated: false, id: Date.now(), }; this.list.push(toodListItme); } //删除一个tood export function removeTood(item) { const { id } = item; this.list = this.list.filter((item) => item.id != id); } 

• App.vue文件

总结

在vue2中在一个组件中写过多代码还是很常见的，不好分离逻辑的地方就在this,因此避免一个文件逻辑过多，可以试试这种方法，在vue3更新后，移除单文件组件对this的过渡依赖，对应的compositionApi已经非常便于我们抽离单文件逻辑代码了。

以上就是派发器抽离vue2单组件中的大量逻辑技巧的详细内容，更多关于派发器vue2单组件逻辑抽离的资料请关注其它相关文章！

提示： 本文由神整理自网络，如有侵权请联系本站删除！
本站声明：
1、本站所有资源均来源于互联网，不保证100%完整、不提供任何技术支持；
2、本站所发布的文章以及附件仅限用于学习和研究目的;不得将用于商业或者非法用途；否则由此产生的法律后果，本站概不负责！