cwjxyp的博客

在使用 Vuex 插件进行状态管理时，一定会遇到一个问题：当页面刷新时（如使用 F5 进行刷新），将导致页面状态丢失为了防止vuex的数据，开发customlugin插件。

设置为false，执行commit的方法前，先将值改为true，监听state的变化，添加判断 如果值为true，则证明是在mutation中修改的数据，如果是false则在控制台断言报错。严格模式下，无论何时发生了状态变更且不是由 mutation 函数引起的，将会抛出错误。这能保证所有的状态变更都能被调试工具跟踪到。严格模式会深度监测状态树来检测不合规的状态变更——请确保在发布环境下关闭严格模式，以避免性能损失。为了统一管理数据，我们希望state的修改只能通过。

在模块注册阶段，会通过类似发布订阅的方式将各模块中的 action、mutation 进行收集并注册，需要根据模块是否开启命名空间状态，为模块拼接命名空间前缀；开启命名空间功能，相当于为每个模块添加独立的作用域，实现模块间状态和事件的隔离；在子模块对象中添加 namespaced：true，为模块开启命名空间功能；所以，可以统一理解为，在事件订阅时，为事件添加对应命名空间标识即可；在模块收集注册时，添加是否开启命名空间标识。中调用方法获取命名空间。

在modules.js中定义方法new Store中，定义响应式数据// 定义响应式数据 resetStoreState(store , state);//目前数据在data中 return this . _state . data }// 定义响应式数据 unction resetStoreState(store , state) {// 为了后续变的方便，包一层data store . _state = reactive({// 循环把每一个 store . getters = {

在vuex下创建Modules文件夹，创建module-collection.js文件，创建 ModuleCollection 类：用于在 Vuex 初始化时进行模块收集操作；因此，需要继续添加支持深层处理的递归逻辑，从而完成“模块树”的构建，即：实现 Vuex 的模块收集；为了能够模拟出多层级的“模块树”，我们再创建一个模块 ModuleC，并注册到 ModuleA 下；创建 register 方法：携带模块路径，对当前模块进行注册，执行“模块树”对象的构建逻辑；模块 A 中，又包含了模块 C；

getters也是返回一个属性，把options中的getters循环遍历到store.getters身上，并使用defineproperty添加响应式。vuex3内部会创造一个vue实例，但是vuex4直接采用vue3提供的响应式方法:reactive。直接将options的state赋值给state，这样数据是非响应式的。将数据变成响应式后，用户获取数据时通过类的属性访问器返回给用户。会带来性能问题，每次只取值也会执行。

install方法在createApp.use(store)时调用。提供一个默认的实例，如果传入则采用传入的。全局暴露一个变量:store的实例。同时实现在组件中使用$store。从vuex使用角度分析。

State：状态，可以理解为 vue 组件中的 data 数据；Getter：可以理解为 vue 中的 computed 计算属性；Mutation：同步函数，可以同步更改状态；Action：异步函数，可以执行异步操作，配合 Mutation 实现状态的异步更新；Module： vuex 的模块化，能够将臃肿复杂的 store 容器进行模块化分割，每个模块拥有独立的 state、mutation、action、getter；