Vuex之理解Store的用法


Posted in Javascript onApril 19, 2017

1.什么是Store?

上一篇文章说了,Vuex就是提供一个仓库,Store仓库里面放了很多对象。其中state就是数据源存放地,对应于与一般Vue对象里面的data(后面讲到的actionsmutations对应于methods)。

在使用Vuex的时候通常会创建Store实例new Vuex.store({state,getters,mutations,actions})有很多子模块的时候还会使用到modules

Vuex之理解Store的用法

总结,Store类就是存储数据和管理数据方法的仓库,实现方式是将数据和方法已对象形式传入其实例中。要注意一个应用或是项目中只能存在一个Store实例!!

2.Store源码分析

class Store{
  constructor (options = {}) {
  // 1.部分2个‘断言函数'判断条件
  assert(Vue, `must call Vue.use(Vuex) before creating a store 
  instance.`) // 在Store实例化之前一定要确保Vue的存在
  assert(typeof Promise !== 'undefined', `vuex requires a Promise polyfill in this browser.`)
  //确保promise存在
  
  // 2.结构赋值拿到options里面的state,plugins和strict
  const {
  state = {}, //rootState
  plugins = [], // 插件
  strict = false //是否严格模式
   } = options
   
  // 3.Store internal state创建store内部属性
  this._options = options //存储参数
  this._committing = false //标识提交状态,保证修改state只能在mutation里面,不能在外部随意修改
  this._actions = Object.create(null) //存储用户定义的actions
  this._mutations = Object.create(null) //存储用户定义的mutations
  this._wrappedGetters = Object.create(null) //存储用户定义的getters
  this._runtimeModules = Object.create(null) //存储运行时的modules
  this._subscribers = [] //存储所有堵mutation变化的订阅者
  this._watcherVM = new Vue() //借用Vue实例的方法,$watch来观测变化
  
  // 4.将dispatch和commit的this指向当前store实例
  const store = this
  const { dispatch, commit } = this
  this.dispatch = function boundDispatch (type, payload) {
  return dispatch.call(store, type, payload)}
  this.commit = function boundCommit (type, payload, options) {
  return commit.call(store, type, payload, options)}}

后面文章逐步分析每一个模块。

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
javascript 三种编解码方式
Feb 01 Javascript
javascript 进阶篇3 Ajax 、JSON、 Prototype介绍
Mar 14 Javascript
js中的this关键字详解
Sep 25 Javascript
Js获取数组最大和最小值示例代码
Oct 29 Javascript
解决用jquery load加载页面到div时,不执行页面js的问题
Feb 22 Javascript
jquery做的一个简单的屏幕锁定提示框
Mar 26 Javascript
javascript+HTML5的Canvas实现Lab单车动画效果
Aug 07 Javascript
jQuery实现多级下拉菜单jDropMenu的方法
Aug 28 Javascript
jQuery+CSS实现简单切换菜单示例
Jul 27 Javascript
详解如何在angular2中获取节点
Nov 23 Javascript
微信小程序template模板与component组件的区别和使用详解
May 22 Javascript
Nuxt的路由动画效果案例
Nov 06 Javascript
微信小程序 判断手机号的实现代码
Apr 19 #Javascript
Vuex简单入门
Apr 19 #Javascript
微信小程序 滚动到某个位置添加class效果实现代码
Apr 19 #Javascript
微信小程序 slider的简单实例
Apr 19 #Javascript
详解Node.js中exports和module.exports的区别
Apr 19 #Javascript
jQuery ajax请求struts action实现异步刷新
Apr 19 #jQuery
JS正则验证多个邮箱完整实例【邮箱用分号隔开】
Apr 19 #Javascript
You might like
深入解析php之apc
2013/05/15 PHP
php中的静态变量的基本用法
2014/03/20 PHP
再Docker中架设完整的WordPress站点全攻略
2015/07/29 PHP
如何解决PHP使用mysql_query查询超大结果集超内存问题
2016/03/14 PHP
javascript入门·动态的时钟,显示完整的一些方法,新年倒计时
2007/10/01 Javascript
Eval and new funciton not the same thing
2012/12/27 Javascript
textarea 控制输入字符字节数(示例代码)
2013/12/27 Javascript
jQuery控制的不同方向的滑动(向左、向右滑动等)
2014/07/18 Javascript
BootStrap table表格插件自适应固定表头(超好用)
2016/08/24 Javascript
Bootstrap jquery.twbsPagination.js动态页码分页实例代码
2017/02/20 Javascript
Web制作验证码功能实例代码
2017/06/19 Javascript
详解微信小程序中的页面代码中的模板的封装
2017/10/12 Javascript
利用Javascript实现一套自定义事件机制
2017/12/14 Javascript
Vue微信项目按需授权登录策略实践思路详解
2018/05/07 Javascript
vuejs实现折叠面板展开收缩动画效果
2018/09/06 Javascript
利用Electron简单撸一个Markdown编辑器的方法
2019/06/10 Javascript
layUI的验证码功能及校验实例
2019/10/25 Javascript
[01:39]2014DOTA2国际邀请赛 Newbee经理CU专访队伍火力全开
2014/07/15 DOTA
python使用在线API查询IP对应的地理位置信息实例
2014/06/01 Python
在Python的Flask框架下收发电子邮件的教程
2015/04/21 Python
深入解析Python编程中super关键字的用法
2016/06/24 Python
使用pip安装python库的多种方式
2019/07/31 Python
Python如何使用ConfigParser读取配置文件
2020/11/12 Python
CSS3的 fit-content实现水平居中
2017/09/07 HTML / CSS
NUK奶瓶美国官网:NUK美国
2016/09/26 全球购物
英国山地公路自行车商店:Tweeks Cycles
2018/03/16 全球购物
Europcar美国/加拿大:预订汽车或卡车租赁服务
2018/11/13 全球购物
NYX Professional Makeup官方网站:专业彩妆和美容产品
2019/10/29 全球购物
新西兰购物网站:TheMarket NZ
2020/09/19 全球购物
党员查摆剖析材料
2014/10/10 职场文书
历史博物馆观后感
2015/06/05 职场文书
高中升旗仪式主持词
2015/07/03 职场文书
青年志愿者活动感想
2015/08/07 职场文书
七年级上册生物的课件
2019/08/07 职场文书
pytorch 使用半精度模型部署的操作
2021/05/24 Python
使用@Value值注入及配置文件组件扫描
2021/07/09 Java/Android