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 相关文章推荐
通过隐藏option实现select的联动效果
Nov 10 Javascript
JavaScript高级程序设计 DOM学习笔记
Sep 10 Javascript
node.js 一个简单的页面输出实现代码
Mar 07 Javascript
iframe子页面与父页面在同域或不同域下的js通信
May 07 Javascript
Javascript冒泡排序算法详解
Dec 03 Javascript
ionic开发中点击input时键盘自动弹出
Dec 23 Javascript
详解浏览器渲染页面过程
Feb 09 Javascript
详解angular ui-grid之过滤器设置
Jun 07 Javascript
webpack 2的react开发配置实例代码
Jul 28 Javascript
浅谈js的解析顺序 作用域 严格模式
Oct 23 Javascript
详解ES6中的代理模式——Proxy
Jan 08 Javascript
angular 未登录状态拦截路由跳转的方法
Oct 09 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 ci框架中加载css和js文件失败的解决方法
2014/03/03 PHP
基于php实现的php代码加密解密类完整实例
2016/10/12 PHP
PHP实现中国公民身份证号码有效性验证示例代码
2017/05/03 PHP
JQuery实现的在新窗口打开链接的方法小结
2010/04/22 Javascript
JavaScript中判断变量是数组、函数或是对象类型的方法
2015/02/25 Javascript
jQuery中$this和$(this)的区别介绍(一看就懂)
2015/07/06 Javascript
基于jQuery实现响应式圆形图片轮播特效
2015/11/25 Javascript
js 判断一组日期是否是连续的简单实例
2016/07/11 Javascript
vue2.0与bootstrap3实现列表分页效果
2017/11/28 Javascript
NW.js 简介与使用方法
2018/02/01 Javascript
angular1.x ui-route传参的三种写法小结
2018/08/31 Javascript
解决vue项目使用font-awesome,build后路径的问题
2018/09/01 Javascript
vue项目中使用tinymce编辑器的步骤详解
2018/09/11 Javascript
使用Vuex解决Vue中的身份验证问题
2018/09/28 Javascript
微信小程序-可移动菜单的实现过程详解
2019/06/24 Javascript
JS前端知识点总结之页面加载事件,数组操作,DOM节点操作,循环和分支
2019/07/04 Javascript
写给新手同学的vuex快速上手指北小结
2020/04/14 Javascript
JavaScript装箱及拆箱boxing及unBoxing用法解析
2020/06/15 Javascript
[16:19]教你分分钟做大人——风暴之灵
2015/03/11 DOTA
[01:09:19]DOTA2-DPC中国联赛 正赛 VG vs Aster BO3 第二场 2月28日
2021/03/11 DOTA
python的常见命令注入威胁
2013/02/18 Python
python使用scrapy发送post请求的坑
2018/09/04 Python
详解Python的数据库操作(pymysql)
2019/04/04 Python
选择Python写网络爬虫的优势和理由
2019/07/07 Python
大家都说好用的Python命令行库click的使用
2019/11/07 Python
python3实现单目标粒子群算法
2019/11/14 Python
利用PyTorch实现VGG16教程
2020/06/24 Python
阿联酋电子产品购物网站:Menakart
2017/09/15 全球购物
Halston Heritage官网:简洁的日装,稍显奢华的晚装
2018/11/20 全球购物
图库照片、免版税图片、矢量艺术、视频片段:Depositphotos
2019/08/02 全球购物
联想阿根廷官方网站:Lenovo Argentina
2019/10/14 全球购物
教师党的群众路线教育实践活动个人对照检查材料
2014/09/23 职场文书
2014年党风廉政建设工作总结
2014/11/19 职场文书
mysql 获取时间方式
2022/03/20 MySQL
什么是Python装饰器?如何定义和使用?
2022/04/11 Python
Golang并发工具Singleflight
2022/05/06 Golang