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)}}

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

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

相关文章

  • Vue3中toRef与toRefs的区别

    Vue3中toRef与toRefs的区别

    这篇文章主要介绍了Vue3中toRef与toRefs的区别,toRefs与toRef功能一致,但可以批量创建多个ref对象,需要注意的是它只会解析对象的第一层属性,语法直接传入对象 toRefs,下面更多内容的介绍需要的小伙伴可以参考一下
    2022-03-03
  • element实现二级菜单和顶部导航联动的示例

    element实现二级菜单和顶部导航联动的示例

    本文主要介绍了element实现二级菜单和顶部导航联动的示例,文中通过示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2022-02-02
  • Ant Design Vue中的table与pagination的联合使用方式

    Ant Design Vue中的table与pagination的联合使用方式

    这篇文章主要介绍了Ant Design Vue中的table与pagination的联合使用方式,具有很好的参考价值,希望对大家有所帮助。如有错误或未考虑完全的地方,望不吝赐教
    2022-10-10
  • vue-element-admin如何转换成中文

    vue-element-admin如何转换成中文

    这篇文章主要介绍了vue-element-admin如何转换成中文问题,具有很好的参考价值,希望对大家有所帮助。如有错误或未考虑完全的地方,望不吝赐教
    2022-03-03
  • Vue开发中常见的套路和技巧总结

    Vue开发中常见的套路和技巧总结

    这篇文章主要给大家介绍了关于Vue开发中常见的套路和技巧的相关资料,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧
    2020-11-11
  • Vue.js如何获取data-*的值

    Vue.js如何获取data-*的值

    这篇文章主要介绍了Vue.js如何获取data-*的值,具有很好的参考价值,希望对大家有所帮助。如有错误或未考虑完全的地方,望不吝赐教
    2022-09-09
  • Element中的Cascader(级联列表)动态加载省\市\区数据的方法

    Element中的Cascader(级联列表)动态加载省\市\区数据的方法

    这篇文章主要介绍了Element中的Cascader(级联列表)动态加载省\市\区数据的方法,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧
    2019-03-03
  • websocket在vue2中的封装使用方式

    websocket在vue2中的封装使用方式

    这篇文章主要介绍了websocket在vue2中的封装使用方式,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教
    2024-08-08
  • vue中解决el-date-picker更改样式不生效问题

    vue中解决el-date-picker更改样式不生效问题

    在使用Vue.js进行前端开发的过程中,Element UI 是一个非常流行的UI库,它提供了一套完整的组件来快速搭建美观的用户界面,但是我们经常遇到一个问题使用Element UI提供的el-date-picker组件时,尝试自定义其样式却无法生效,所以本文给大家介绍如何解决这个问题
    2024-10-10
  • Vue实现移除数组中特定元素的方法小结

    Vue实现移除数组中特定元素的方法小结

    这篇文章主要介绍了Vue如何优雅地移除数组中的特定元素,文中介绍了单个去除和批量去除的操作方法,并通过代码示例讲解的非常详细,具有一定的参考价值,需要的朋友可以参考下
    2024-03-03

最新评论