# dispatcher-calculate-vue2.x-demo2

**Repository Path**: kevinleeeee/dispatcher-calculate-vue2.x-demo2

## Basic Information

- **Project Name**: dispatcher-calculate-vue2.x-demo2
- **Description**: **案例2：计算器**

技术：派发器
- **Primary Language**: Unknown
- **License**: Not specified
- **Default Branch**: master
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 0
- **Forks**: 0
- **Created**: 2021-11-23
- **Last Updated**: 2021-11-23

## Categories & Tags

**Categories**: Uncategorized

**Tags**: None

## README

## 派发器 

Dispatcher

派发器模式来改造组件的逻辑部分

如何的去根据需求去更改数据

`methods`操作数据data，更多的不想逻辑写在`methods`里面

因为一个组件它的逻辑部分非常多的话，`methods`里面就不好维护了

优点：给更多同步开发的开发者实现方法管理



***问题：如何根据一个模式去设计不让`method`里面的逻辑变得臃肿？***

抽离相应的部分，通过`type`找到一个对应事件，找到事件对应的逻辑，逻辑通过事件类型`type`去触发派发器，触发数据的改变，这样就横向的把`methods`拆分出来了



原理：type -> 事件 -> 逻辑 -> type -> 派发器 -> 数据的更改

**案例2：计算器**

技术：派发器

```
//项目结构
├─src
|  ├─App.vue
|  ├─main.js
|  ├─reducers
|  |    └calculator.js
|  ├─libs
|  |  └utils.js
|  ├─dispatchers
|  |      └calculator.js
|  ├─components
|  |     ├─Calculator
|  |     |     ├─CalButton.vue
|  |     |     ├─CalInput.vue
|  |     |     ├─CalResult.vue
|  |     |     └index.vue
|  ├─actions
|  |    └calculator.js
├─public
|   └index.html
```

源码地址：https://gitee.com/kevinleeeee/dispatcher-calculate-vue2.x-demo2