Vuex之理解Store的用法
作者:何凯 时间:2024-05-13 09:37:33
1.什么是Store?
上一篇文章说了,Vuex
就是提供一个仓库,Store
仓库里面放了很多对象。其中state就是数据源存放地,对应于与一般Vue
对象里面的data
(后面讲到的actions
和mutations
对应于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)}}
后面文章逐步分析每一个模块。
来源: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