Vuex之理解Store的用法

作者:何凯 时间:2024-05-13 09:37:33 

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

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

来源:https://segmentfault.com/a/1190000009101751

标签:vuex,store
0
投稿

猜你喜欢

  • php调用百度人脸识别接口查询数据库人脸信息实现验证登录功能

    2024-03-23 13:36:44
  • 简单了解Django ContentType内置组件

    2022-08-04 08:57:16
  • JavaScript 数组方法filter与reduce

    2024-04-29 13:14:38
  • 关于scipy.optimize函数使用及说明

    2022-10-19 04:24:04
  • Python企业编码生成系统之主程序模块设计详解

    2023-11-18 18:44:37
  • CSS实例讲解:地图提示

    2007-05-11 17:04:00
  • Python利用requests模块下载图片实例代码

    2023-11-18 16:10:13
  • python基于pygame实现响应游戏中事件的方法(附源码)

    2021-03-26 07:15:55
  • Python统计python文件中代码,注释及空白对应的行数示例【测试可用】

    2023-04-30 00:11:19
  • python实现给微信公众号发送消息的方法

    2021-08-25 23:44:57
  • python+unittest+requests实现接口自动化的方法

    2022-04-10 08:47:38
  • 基于Python实现超级玛丽游戏的示例代码

    2022-02-14 16:48:00
  • 上传图片js判断图片尺寸和格式兼容IE

    2024-04-10 10:48:37
  • Python enumerate()计数器简化循环

    2022-07-31 22:15:43
  • 基于jQuery.validate及Bootstrap的tooltip开发气泡样式的表单校验组件思路详解

    2024-04-16 10:27:29
  • 对Python中小整数对象池和大整数对象池的使用详解

    2023-02-17 18:13:49
  • 如何让python的运行速度得到提升

    2023-04-26 21:48:35
  • 解决python matplotlib imshow无法显示的问题

    2023-07-19 23:59:25
  • Python2与Python3的区别点整理

    2022-02-23 07:44:46
  • SQL Server 数据库管理常用的SQL和T-SQL语句

    2024-01-27 01:10:53
  • asp之家 网络编程 m.aspxhome.com