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挂载。

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
【社区内容提示】社区部分内容疑似由AI辅助生成,浏览时请结合常识与多方信息审慎甄别。
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

相关阅读更多精彩内容

  • 写在前面 因为对Vue.js很感兴趣,而且平时工作的技术栈也是Vue.js,这几个月花了些时间研究学习了一下Vue...
    染陌同学阅读 5,582评论 0 12
  • Vuex源码阅读分析 Vuex是专为Vue开发的统一状态管理工具。当我们的项目不是很复杂时,一些交互可以通过全局事...
    steinslin阅读 3,821评论 0 6
  • 前言 HackerNews是基于 HN 的官方 firebase API 、Vue 2.0 、vue-router...
    osan阅读 7,654评论 2 8
  • 一开始用vuex的时候我也十分疑惑,然后百度一下发现官网和大部分博客都说的是一个支持同步操作一个支持异步操作...
    zpkzpk阅读 12,033评论 0 4
  • 前言 之前几篇解析 Vue 源码的文章都是完整的分析整个源码的执行过程,这篇文章我会将重点放在核心原理的解析,不会...
    心_c2a2阅读 5,355评论 1 8

友情链接更多精彩内容