VUEX 3.x源码分析——1. 理解state

重生之我是蔡经理

已于 2024-06-03 19:38:43 修改

阅读量1k

点赞数 18

分类专栏：前端文章标签：前端 javascript vue.js

于 2024-05-19 21:49:05 首次发布

本文链接：https://blog.youkuaiyun.com/miyagiSimple/article/details/139044833

版权

这是对vuex3.x版本的源码分析。
本次分析会按以下方法进行：

按官网的使用文档顺序，围绕着某一功能点进行分析。这样不仅能学习优秀的项目源码，更能加深对项目的某个功能是如何实现的理解。这个对自己的技能提升，甚至面试时的回答都非常有帮助。
在围绕某个功能展开讲解时，所有不相干的内容都会暂时去掉，等后续涉及到对应的功能时再加上。这样最大的好处就是能循序渐进地学习，同时也不会被不相干的内容影响。省略的内容都会在代码中以…表示。
每段代码的开头都会说明它所在的文件目录，方便定位和查阅。如果一个函数内容有多个函数引用，这些都会放在同一个代码块中进行分析，不同路径的内容会在其头部加上所在的文件目录。

State的初始化

当我们创建了一个store时，state发生了什么。
假设我们按官网的内容，初始化了一个最基础的store：

import Vue from 'vue'
import Vuex from 'vuex'

Vue.use(Vuex)

const store = new Vuex.Store({
   
  state: {
   
    count: 0
  }
  // 这里去掉了 mutations 的内容，只关注state
})

这里实例上是创建了一个Store类，并将count内容作为参数传入

// ./index.js
import {
    Store } from './store'
// Vuex.Store 就是这里的Store，它是从 ./store 导入的
export default {
   
	Store,
	...
}

// ./store.js
import ModuleCollection from './module/module-collection'
export class Store{
   
	constructor(options = {
    }) {
   
		...
		this._modules = New ModuleCollection(options)
		const state = this._modules.root.state
		// 可以看出是来自于ModuleCollection类的，那接着看下一段 ModuleCollection 的代码
	}
}

// ./module/module-collection.js
import Module from './module'
export default class ModuleCollection {
   
	constructor(rawRootModule) {
   
		this.register([], rawRootModule, false)
	}
	...
	register(pa

最低0.47元/天解锁文章