# 手写minVuex

**Repository Path**: leemingy/shouxieminvuex

## Basic Information

- **Project Name**: 手写minVuex
- **Description**: 手写minVuex
- **Primary Language**: JavaScript
- **License**: Not specified
- **Default Branch**: master
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 1
- **Forks**: 0
- **Created**: 2019-10-04
- **Last Updated**: 2020-12-19

## Categories & Tags

**Categories**: Uncategorized

**Tags**: None

## README

在vuex内部我们可以创建全局数据。通过this.$stroe.xxx来拿到对应的数据或者操作对应的方法。并且数据是响应的。那么我们来看下怎么实现这两个功能。

首先数据响应我们可以直接用到vue的内部数据响应。我们可以通过创建一个实例。
![avatar](https://oscimg.oschina.net/oscnet/bc3ccb7bbdd8628234c16faa83c0ed35acf.jpg)



看bindData这个方法，我们直接创建一个vue的实例让后将我们的state绑定到对应的data上，然后把我们对应的方法全部绑定到vue.prototype.$store上,这样我们就把对应方法注册到全局了。

现在我们可以直接在任何组件通过this.$store.xx拿到数据和方法了。接下来我们开始写各个方法了.

先看commit
![avatar](https://oscimg.oschina.net/oscnet/e12d334c766d76e1d0e6752ee650395dfe4.jpg)



commit接受一个字符串及其其他自定义参数，我们获取到对应的参数，mutation表示对应的mutation函数名称,elargs表示其他参数,那么我们直调用即可。传入对应的state和其他参数即可。这里的state必须是实例内部的data。不然不会响应。

再看dispatch
![avatar](https://oscimg.oschina.net/oscnet/0b9cc90b1355cb7241aa3a63a2fc8dd49d8.jpg)



跟commit一样先获取对应的参数，参数基本一样，只是接受的action函数名称,然后调用action,action的内部接受一个context对象，及其其他参数,这个context对象集成我们声明的所以函数,我们全部传入即可。

最后我们的getters
![avatar](https://oscimg.oschina.net/oscnet/d649130b5f9c46142070c69a7c44c6f7fc2.jpg)



getters我为了统一跟前面一样的风格，一样传入对应的getters函数名称，然后直接执行返回即可。

好了，一个简单的vuex就此实现了，我们带入试一下.
![avatar](https://oscimg.oschina.net/oscnet/856b54e0c3848c89afcc0b9cbd951a08c56.jpg)



然后你就可以尽情的操作数据了，跟vuex一样。