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 相关文章推荐
jquery scroll()区分横向纵向滚动条的方法
Apr 04 Javascript
jquery如何扑捉回车键触发的事件
Apr 24 Javascript
JavaScript中循环遍历Array与Map的方法小结
Mar 12 Javascript
Vue Transition实现类原生组件跳转过渡动画的示例
Aug 19 Javascript
基于Vue的移动端图片裁剪组件功能
Nov 28 Javascript
jQuery+CSS实现的table表格行列转置功能示例
Jan 08 jQuery
说说node中的可读流和可写流的区别
Jun 01 Javascript
vueJs实现DOM加载完之后自动下拉到底部的实例代码
Aug 31 Javascript
JS/HTML5游戏常用算法之碰撞检测 包围盒检测算法详解【圆形情况】
Dec 13 Javascript
JavaScript数据结构与算法之检索算法实例分析【顺序查找、最大最小值、自组织查询】
Feb 22 Javascript
详解javascript中的Error对象
Apr 25 Javascript
layui表格 返回的数据状态异常的解决方法
Sep 10 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学习笔记之二
2011/01/17 PHP
php中session退出登陆问题
2014/02/27 PHP
3款值得推荐的微信开发开源框架
2014/10/28 PHP
WordPress导航菜单的滚动和淡入淡出效果的实现要点
2015/12/14 PHP
php从身份证获取性别和出生年月
2017/02/09 PHP
判断控件是否已加载完成的代码
2010/02/24 Javascript
js实现在文本框光标处添加字符的方法介绍
2012/11/24 Javascript
jquery 添加节点的几种方法介绍
2013/09/04 Javascript
Jquery取得iframe下内容的方法
2013/11/18 Javascript
JS使用for循环遍历Table的所有单元格内容
2014/08/21 Javascript
nodejs 整合kindEditor实现图片上传
2015/02/03 NodeJs
微信小程序 rpx 尺寸单位详细介绍
2016/10/13 Javascript
JS/jquery实现一个网页内同时调用多个倒计时的方法
2017/04/27 jQuery
JQuery 获取Dom元素的实例讲解
2017/07/08 jQuery
JavaScript严格模式下关于this的几种指向详解
2017/07/12 Javascript
深入理解ES6学习笔记之块级作用域绑定
2017/08/19 Javascript
jQuery+datatables插件实现ajax加载数据与增删改查功能示例
2018/04/17 jQuery
jQuery-Citys省市区三级菜单联动插件使用详解
2019/07/26 jQuery
JS数组reduce()方法原理及使用技巧解析
2020/07/14 Javascript
使用python统计文件行数示例分享
2014/02/21 Python
Python查找相似单词的方法
2015/03/05 Python
python实现简单的五子棋游戏
2020/09/01 Python
怎么解决pycharm license Acti的方法
2020/10/28 Python
欧克利英国官网:Oakley英国
2019/08/24 全球购物
程序集与命名空间有什么不同
2014/07/25 面试题
非功能性需求都包括哪些方面
2013/10/29 面试题
应届生高等护理求职信
2013/10/12 职场文书
信息工程学院毕业生推荐信
2013/11/05 职场文书
销售行政专员职责
2014/01/03 职场文书
信息技术专业大学生职业生涯规划书
2014/01/24 职场文书
志愿者活动总结报告
2014/06/27 职场文书
超市店庆活动方案
2014/08/31 职场文书
思想政治表现评语
2015/01/04 职场文书
鲁滨逊漂流记读书笔记
2015/06/26 职场文书
评奖评优个人先进事迹材料
2015/11/04 职场文书
一起来看看Vue的核心原理剖析
2022/03/24 Vue.js