vue源码-vuex源码解析-造轮子

vuex使用方法：

根据vuex使用方法分析：

1、vuex使用是一个插件。

2、需要实现vuex构造函数Store类。

实现方式如下：

（1）state状态管理器的实现：

把用户的传递过来的state放在data里，实现响应式数据。由于state不能让用户随意访问，所以需要对state加上一层封装，变成$$state:oprions.state。

然后实现state的get和set方法：

（2）mutation和actions实现：

1、首先在store类里面，将用户的方法进行存储。

2、实现mutation和actions调用的对应的方法：

commit方法：

实现原理看图片备注，entry就是用户在mutation里写的方法。由于mutation可以直接修改state里的值，所以函数第一个值可以直接传state。

dispath方法：

实现思路与commit方法大致一样，但是entyr出口函数传递的第一个参数不一样。dispath函数里传递的是上下文，可以传递this，this里面包含了commit(),getter()、因为dispatch不能直接修改state里的值，不能直接传递state。

getters方法：

const computed = {}

    this.getters = {}

    const store = this

    Object.keys(this._wapperedGetter).forEach(key => {

      const fn = this._wrappedGetters[key]

      computed[key] = function() {

        return fn(store.state)

      }

      Object.defineProperty(store.getters, key, {

        get: () => store._vm[key]

      })

    })

3、实现vuex插件安装，加入mixin混入，延迟到vue实例出来后，进行store挂载。