vue-store源码实现(一)

入口文件分析

1. Vuex是一个插件,所以需要使用Vue的install方法来实现一个插件。

2. 说明Store是一个类,所以实现的时候需要实现一个Store类,然后有个构造器来接收传过来的参数。

实现过程

1. 实现插件。和vue-router一样,讲$store挂载在原型上,这样在vue组件内任意地方都可以使用this.$store。


2, 创建一个Store类,里面的构造器可以接收外部的传参。

实现state: 做响应式状态state属性,然后用get 和set方法来处理。将data数据挂载在实例上, 之所以用$$state来接收options里面的state值,是因为不想用户直接改变state的值。然后就可以用this._vm._data.$$state拿到state的值,返回出去就可以了。


实现commit: 

1. 定义变量接收options里面的mutations

2. 创建commit方法,根据传过来的type(因为用户使用时会传一个值得,这个值就是mutations里面的方法名),这样就可以拿到用户需要调用的mutations的方法,我们传参调用就可以了。因为mutations里面可以改变state的值,所以我们传state的值进去。

3. 发现不能拿到state, 是因为this指向的原因,所以我们绑定上下文

实现dispatch:

1. 定义变量接收options里面的actions

2. 创建dispatch方法,根据传过来的type(因为用户使用时会传一个值得,这个值就是dispatch里面的方法名),这样就可以拿到用户需要调用的dispatch的方法,我们传参调用就可以了。因为dispatch里面第一个参数实际上是上下文,所以我们传this进去就可以了。

3. 发现不能值, 是因为this指向的原因,所以我们绑定上下文


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

相关阅读更多精彩内容

  • 2019-10-22 vue文档 一、课程介绍 https://vuejs.lipengzhou.com/ 内容 ...
    欣简书阅读 3,558评论 0 1
  • 一、课程介绍 https://vuejs.lipengzhou.com/ 内容 使用 Vue.js 系列技术栈进行...
    她说东京很热阅读 2,241评论 0 0
  • vue文档 一、课程介绍 https://vuejs.lipengzhou.com/ 内容 使用 Vue.js 系...
    chang_遇见缘阅读 11,875评论 9 126
  • vue文档 一、课程介绍 https://vuejs.lipengzhou.com/ 内容 使用 Vue.js 系...
    前端陈陈陈阅读 1,950评论 0 1
  • 基础部分 模版语法 1.computed和watch的区别 计算属性computed :支持缓存,data数据不变...
    王蕾_fd49阅读 3,759评论 0 0

友情链接更多精彩内容