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读取xml
Nov 04 Javascript
JQuery 选择和过滤方法代码总结
Nov 19 Javascript
js获取指定日期前后的日期代码
Aug 20 Javascript
通过Jquery的Ajax方法读取将table转换为Json
May 31 Javascript
jQuery实现简单的图片查看器
Sep 11 Javascript
JS递归遍历对象获得Value值方法技巧
Jun 14 Javascript
jQuery 限制输入字符串长度
Jun 20 Javascript
javascript比较语义化版本号的实现代码
Sep 09 Javascript
AngularJS中过滤器的使用与自定义实例代码
Sep 17 Javascript
js实现刷新页面后回到记录时滚动条的位置【两种方案可选】
Dec 12 Javascript
tablesorter.js表格排序使用方法(支持中文排序)
Feb 10 Javascript
JQuery使用数组遍历跳出each循环
Sep 01 jQuery
微信小程序 判断手机号的实现代码
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函数array_flip()在重复数组元素删除中的作用
2013/06/27 PHP
利用phpExcel实现Excel数据的导入导出(全步骤详细解析)
2013/11/26 PHP
php运行提示:Fatal error Allowed memory size内存不足的解决方法
2014/12/17 PHP
搭建Vim为自定义的PHP开发工具的一些技巧
2015/12/11 PHP
Yii数据库缓存实例分析
2016/03/29 PHP
JavaScript使用prototype定义对象类型
2007/02/07 Javascript
jquery ui dialog ie8出现滚动条的解决方法
2010/12/06 Javascript
JS测试显示屏分辨率以及屏幕尺寸的方法
2013/11/22 Javascript
javascript 通用loading动画效果实例代码
2014/01/14 Javascript
jquery 鼠标滑动显示详情应用示例
2014/01/24 Javascript
JavaScript二维数组实现的省市联动菜单
2014/05/08 Javascript
js时间日期格式化封装函数
2014/12/02 Javascript
jquery+ajax验证不通过也提交表单问题处理
2014/12/12 Javascript
详解AngularJS中的作用域
2015/06/17 Javascript
NodeJS实现阿里大鱼短信通知发送
2016/01/17 NodeJs
JS比较两个数值的大小实例
2016/11/25 Javascript
微信小程序实现action-sheet弹出底部菜单功能【附源码下载】
2017/12/09 Javascript
JS+HTML5 canvas绘制验证码示例
2018/12/05 Javascript
elementUI vue this.$confirm 和el-dialog 弹出框 移动 示例demo
2019/07/03 Javascript
vue radio单选框,获取当前项(每一项)的value值操作
2020/09/10 Javascript
python比较两个列表大小的方法
2015/07/11 Python
Python内建模块struct实例详解
2018/02/02 Python
python框架中flask知识点总结
2018/08/17 Python
Python DataFrame.groupby()聚合函数,分组级运算
2018/09/18 Python
对Python通过pypyodbc访问Access数据库的方法详解
2018/10/27 Python
python Django中models进行模糊查询的示例
2019/07/18 Python
window7下的python2.7版本和python3.5版本的opencv-python安装过程
2019/10/24 Python
Python内置方法实现字符串的秘钥加解密(推荐)
2019/12/09 Python
Python smtp邮件发送模块用法教程
2020/06/15 Python
利用scikitlearn画ROC曲线实例
2020/07/02 Python
Yahoo-PHP面试题1
2016/07/20 面试题
用C#语言写出与SQLSERVER访问时的具体过程
2013/04/16 面试题
党委工作总结2015
2015/04/27 职场文书
赢在中国观后感
2015/06/02 职场文书
幼儿园安全教育随笔
2015/08/14 职场文书
详解解Django 多对多表关系的三种创建方式
2021/08/23 Python