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 dom 基本操作小结
Apr 11 Javascript
jquery 操作日期、星期、元素的追加的实现代码
Feb 07 Javascript
jQuery中noconflict函数的实现原理分解
Feb 03 Javascript
png在IE6 下无法透明的解决方法汇总
May 21 Javascript
原生js实现返回顶部缓冲效果
Jan 18 Javascript
ES6中module模块化开发实例浅析
Apr 06 Javascript
js实现控制文件拖拽并获取拖拽内容功能
Feb 17 Javascript
vue-router动态设置页面title的实例讲解
Aug 30 Javascript
详解KOA2如何手写中间件(装饰器模式)
Oct 11 Javascript
electron中使用bootstrap的示例代码
Nov 06 Javascript
js面试题之异步问题的深入理解
Sep 20 Javascript
解决Antd 里面的select 选择框联动触发的问题
Oct 24 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脚本不报错的原因
2014/06/12 PHP
PHP读取、解析eml文件及生成网页的方法示例
2017/09/04 PHP
PHP 获取客户端 IP 地址的方法实例代码
2018/11/11 PHP
javascript 显示当前系统时间代码
2009/12/28 Javascript
js中通过split函数分割字符串成数组小例子
2013/09/21 Javascript
innerHTML,outerHTML,innerText,outerText的用法及区别解析
2013/12/16 Javascript
js通过iframe加载外部网页的实现代码
2015/04/05 Javascript
js实现Select列表各项上移和下移的方法
2015/08/14 Javascript
跟我学习javascript的全局变量
2015/11/16 Javascript
JavaScript设计模式初探
2016/01/07 Javascript
学习JavaScript设计模式之中介者模式
2016/01/14 Javascript
jquery的父、子、兄弟节点查找,节点的子节点循环方法
2016/12/07 Javascript
初识NodeJS服务端开发入门(Express+MySQL)
2017/04/07 NodeJs
webpack配置导致字体图标无法显示的解决方法
2018/03/06 Javascript
vue axios请求拦截实例代码
2018/03/29 Javascript
NodeJs生成sitemap站点地图的方法示例
2019/06/11 NodeJs
vue实现日历备忘录功能
2020/09/24 Javascript
原生javascript中this几种常见用法总结
2020/02/24 Javascript
[45:59]EG vs OG 2018国际邀请赛小组赛BO2 第二场 8.17
2018/08/18 DOTA
django之常用命令详解
2016/06/30 Python
pyspark 读取csv文件创建DataFrame的两种方法
2018/06/07 Python
pandas 按照特定顺序输出的实现代码
2018/07/10 Python
python开发准备工作之配置虚拟环境(非常重要)
2019/02/11 Python
Python FTP文件定时自动下载实现过程解析
2019/11/12 Python
个人求职信范文分享
2014/01/06 职场文书
新员工欢迎词
2014/01/12 职场文书
商业融资计划书
2014/04/29 职场文书
学习焦裕禄同志为人民服务思想汇报
2014/09/10 职场文书
二手房购房协议书范本
2014/10/05 职场文书
公司租房协议书
2014/10/14 职场文书
2014年超市员工工作总结
2014/11/18 职场文书
五四青年节比赛演讲稿
2015/03/18 职场文书
通知函的格式
2015/04/27 职场文书
公司仓库管理制度
2015/08/04 职场文书
护士岗前培训心得体会
2016/01/08 职场文书
Win10此设备不支持接收Miracast无法投影的解决方法
2022/07/07 数码科技