Vuex之理解Store的用法

 更新时间:2017年04月19日 14:53:25   作者:何凯  
本篇文章主要介绍了Vuex之理解Store的用法,Store类就是存储数据和管理数据方法的仓库,实现方式是将数据和方法已对象形式传入其实例中

1.什么是Store?

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

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

总结,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)}}

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

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

相关文章

  • Vue如何实现分批加载数据

    Vue如何实现分批加载数据

    这篇文章主要介绍了Vue如何实现分批加载数据,具有很好的参考价值,希望对大家有所帮助。如有错误或未考虑完全的地方,望不吝赐教
    2022-04-04
  • Vue项目配置router.js流程分析讲解

    Vue项目配置router.js流程分析讲解

    第一次写Vue项目,要用到router.js,看了一下官方文档,还是很懵逼,不知道怎么配置,又去看视频查资料,最后终于搞定了。话不多说,先上代码,我再讲一些要注意的细节
    2022-12-12
  • vue回到顶部监听滚动事件详解

    vue回到顶部监听滚动事件详解

    这篇文章主要为大家详细介绍了vue回到顶部监听滚动事件,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2019-08-08
  • 浅谈vuex的基本用法和mapaction传值问题

    浅谈vuex的基本用法和mapaction传值问题

    今天小编就为大家分享一篇浅谈vuex的基本用法和mapaction传值问题,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧
    2019-11-11
  • Vue+FormData+axios实现图片上传功能的项目实战

    Vue+FormData+axios实现图片上传功能的项目实战

    本文主要介绍了Vue+FormData+axios实现图片上传功能的项目实战,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧
    2023-06-06
  • Vue 技巧之控制父类的 slot

    Vue 技巧之控制父类的 slot

    插槽(Slot)是Vue提出来的一个概念,正如名字一样,插槽用于决定将所携带的内容,插入到指定的某个位置,从而使模板分块,具有模块化的特质和更大的重用性。
    2020-02-02
  • 一步步教你利用webpack如何搭一个vue脚手架(超详细讲解和注释)

    一步步教你利用webpack如何搭一个vue脚手架(超详细讲解和注释)

    这篇文章主要给大家介绍了软玉利用webpack如何搭一个vue脚手架的相关资料,文中有超详细讲解和注释,对大家学习或者使用webpack具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧。
    2018-01-01
  • vue组件开发props验证的实现

    vue组件开发props验证的实现

    这篇文章主要介绍了vue组件开发props验证的实现,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧
    2019-02-02
  • vuex vue简单使用知识点总结

    vuex vue简单使用知识点总结

    在本篇文章里小编给大家整理了关于vuex vue简单使用知识点总结,有需要的朋友们可以参考下。
    2019-08-08
  • vue axios封装及API统一管理的方法

    vue axios封装及API统一管理的方法

    这篇文章主要介绍了vue axios封装以及API统一管理 ,需要的朋友可以参考下
    2019-04-04

最新评论