皮皮网

1.Vuex 4源码学习笔记 - mapState、源码mapGetters、源码mapActions、源码mapMutations辅助函数原理（六）
2.vuex中mutations与actions的区别
3.Vuex2.0源码解析
4.vuex源码解析
5.面对 this 源码指向丢失，尤雨溪在 Vuex 源码中是源码怎么处理的
6.vuex dispatch和commit 的区别

Vuex 4源码学习笔记 - mapState、mapGetters、源码cc2640源码mapActions、源码mapMutations辅助函数原理（六）

       在前一章中，源码我们通过了解Vuex的源码dispatch功能，逐步探索了Vuex数据流的源码核心工作机制。通过这一过程，源码我们对Vuex的源码整体运行流程有了清晰的把握，为深入理解其细节奠定了基础。源码本章节，源码我们将聚焦于Vuex的源码辅助函数，包括mapState、mapGetters、mapActions、mapMutations以及createNamespacedHelpers，这些函数旨在简化我们的开发流程，使其更符合实际应用需求。

       请注意，这些辅助函数在Vue 3的Composition API中不适用，因为它们依赖于组件实例（this），记账网站源码而在Setup阶段，this尚未被创建。因此，它们仅适用于基于选项的Vue 2或Vue 3经典API。

       以mapState为例，它允许我们以计算属性的形式访问Vuex中的状态。当组件需要获取多个状态时，通过mapState生成的计算属性可以显著减少代码冗余。若映射的计算属性名称与state子节点名称相同，只需传入字符串数组。此外，通过对象展开运算符，我们能轻松地在已有计算属性中添加新的映射。

       深入代码层面，mapState的核心功能在src/helpers.js文件中得以实现。通过normalizeNamespace函数统一处理命名空间和map数据，然后利用normalizeMap函数将数组或对象格式数据标准化，最终返回一个封装后的函数对象。通过这种方式，mapState有效简化了状态访问的实现。

       mapGetters、mapMutations、mapActions遵循相似的萌站源码模式，通过normalizeNamespace统一输入，然后使用normalizeMap统一数据处理，最后返回对象格式的函数集合，支持对象展开运算符的使用。这些函数简化了获取、执行actions和mutations的过程。

       createNamespacedHelpers则是为管理命名空间模块提供便利。通过传入命名空间值，它生成一组组件绑定辅助函数，简化了针对特定命名空间的模块操作。此函数通过bind方法巧妙地将namespace参数绑定到返回的函数集合中，实现了高效、灵活的命名空间管理。

       本章节对mapState的实现原理进行了深入分析，并展示了其余辅助函数的相似之处。通过理解这些函数的工作机制，我们能更高效地应用Vuex，优化组件间的交互与状态管理。利用这些工具，开发者能够更专注于业务逻辑的实现，而不是繁琐的状态获取和管理。

       在探索更多前端知识的旅程中，让我们一起关注公众号小帅的鼎峰源码编程笔记，每天更新精彩内容，与编程社区一同成长。

vuex中mutations与actions的区别

       è¦æ‰§è¡Œvuex中的函数，有两种方法：

        1.commit，例如this.$store.commit("GETMODULESELECTLIST");　　　　//mutations中的方法

        2.dispatch，例如 this.$store.dispatch("getModuleSelectList");　　　　　　//actions中的方法

        两者之间的区别在于：

        commit是提交执行mutations中的方法，Mutations 是修改数据的，必须同步。

        dispatch是提交执行actions中的方法，action 提交的是Mutations,可以是异步操作。action不可以修改store中的数据，需要commit mutation中的方法进行数据修改

        当你的操作行为中含有异步操作，比如向后台发送请求获取数据，就需要使用action的dispatch去完成了。

Vuex2.0源码解析

       本文通过简洁流程图和文字说明，旨在以非源码深入方式理解Vuex原理，助力在实际使用和调试过程中更加得心应手。

一、Vuex概览

       Vuex是专为Vue.js应用设计的状态管理模式，集中式存储所有组件状态，并确保以可预测方式变化，简化组件间数据共享与修改。

二、核心概念解析

       理解Vuex源码前，需熟悉其核心概念：Vuex用于管理应用状态，store是其核心内容，支持组件注册、状态调用和修改。

三、Vuex2.0源码结构

       Vuex2.0源码包括五个部分，本文将聚焦关键部分。

四、核心源码解析

4.1、install

       核心目的：注入Vue的store属性，实现应用初始化。女装网站源码

4.2、store

       store管理状态，支持组件注册、方法调用和状态修改，构造函数内完成内部属性和方法初始化。

4.2.1、installModule

       完成模块的state、mutations、actions和getters注册，涉及模块环境检测、状态更新和本地化操作。

4.2.2、resetStoreVM

       处理state和getters的使用，通过Vue实例化和api实现状态访问。

五、API使用

       commit和dispatch用于执行mutations和actions，_withCommit为核心提交状态修改方法。

六、辅助函数

       提供语法糖：mapState、mapMutations、mapActions和mapGetters，简化状态和方法操作。

七、插件

       devtool和logger插件接入开发者工具和输出状态变化日志，辅助调试。

八、总结

       本文概述了Vuex2.0源码关键部分，通过非源码深入方式理解其原理，提供基础应用与调试指引。阅读完整源码有助于更全面理解Vuex设计和编码风格，为技术发展奠定基础。

vuex源码解析

       Vuex 是一个专为 Vue.js 应用设计的状态管理库，它采用集中式存储管理应用的所有组件的状态，确保状态以一种可预测的方式变化。Vuex 的状态管理基于 Vue 的响应式原理，因此在 Vue 应用中使用它。

       要使用 Vuex，需在 Vue 实例上挂载一个 store。通过 Vue.use(Vuex)，Vue 实例可以获得 Vuex 的功能，其内部机制会自动在组件中添加一个指向 store 的 .$store 属性。

       安装 Vuex 时，会执行一个名为 install 的方法，该方法在 Vuex 的构造函数中调用。安装阶段，Vuex 会往每一个组件实例上添加一个 beforeCreate 钩子函数，并在其中注入 store。通过 this.$store 访问 store 的属性和方法。

       使用 Vuex 时，通过 new Vuex.Store({ }) 创建 store。构造函数中的 this.modules 属性是一个递归收集模块的实例。模块结构遵循树型设计，store 作为根模块，其子模块作为子树。Vuex 通过 register 方法构建模块树。

       在 store 的构造函数中，有一个 installModule 方法用于注册模块。此方法处理命名空间概念，将模块的 action、mutation 和 getter 注册到全局或指定命名空间中。注册模块时，会创建一个本地上下文，该上下文根据命名空间调整调用 store.dispatch 和 store.getters 的行为。

       对于 getters 的处理，存在命名空间时，通过 store._makeLocalGettersCache 查找或创建缓存，根据命名空间获取或创建 getters。state 的获取则通过 getNestedState 函数，从根状态开始，通过路径递归查找子模块的 state。

       在 installModule 方法中，通过 _mutations、_actions 和 _wrappedGetters 存储模块的 mutations、actions 和 getters。mutations 和 actions 以键值对的形式存储，键由命名空间和方法名组成。getters 通过 createLocalGetter 方法创建本地缓存，用于高效访问。

       初始化 store._vm 是创建响应式实例的过程，将 state 和 getters 关联到 Vue 实例中，实现状态和计算属性的响应性。

       访问 state、mutations、actions 和 getters 时，可以通过 .$store 访问，根据命名空间调整访问行为。获取 state 使用 get 函数处理，访问 mutations 和 actions 使用 commit 和 dispatch 方法，并在执行时检查是否处于调用 mutations 或 actions 的状态。

       为了方便组件复用状态逻辑，Vuex 提供了 mapState、mapGetters、mapMutations 和 mapActions 辅助函数，分别用于简化状态、getters、mutations 和 actions 的映射，减少代码冗余。

面对 this 指向丢失，尤雨溪在 Vuex 源码中是怎么处理的

       面对 this 指向丢失，尤雨溪在 Vuex 源码中是怎么处理的

       在解析 Vuex 源码时，尤雨溪注意到一处 this 指向问题。为解决 this 指向丢失导致的错误，他巧妙地使用了 call 方法，将 dispatch 和 commit 函数的 this 指向强制绑定到 store 实例对象上。这种处理方式确保了函数在执行时正确指向了 store 实例，从而避免了错误。

       对于对象中的 this 指向和类中的 this 指向，尤雨溪分别从 ES5 和 ES6 的角度进行了详细的解释，包括如何正确使用 call 和 apply 方法来解决 this 指向问题。通过这些方法，开发者可以确保在不同的上下文中，函数能够正确地绑定到正确的 this 指向。

       在 Vuex 源码中，尤雨溪巧妙地利用了对象解构赋值的写法来处理 this 指向。他通过将 store 实例传递给 actions 函数的第一个参数，确保了这些函数能够正确地绑定到 store 实例上。这一处理方式简化了代码，使得开发者可以轻松地利用 this 指向，而无需担心上下文问题。

       为了进一步解释 actions 对象中的 this 指向，尤雨溪展示了 Vuex 源码中的构造函数和相关函数实现。通过分析这些代码，可以清楚地看到 store 实例如何通过 call 函数被绑定到 actions 函数的上下文中，从而确保了正确的 this 指向。

       总结来说，面对 this 指向问题，尤雨溪在 Vuex 源码中采取了巧妙的处理方式，如使用 call 方法和对象解构赋值等，确保了函数能够在不同的上下文中正确地绑定到 this 指向。这种处理方式不仅解决了问题，还提供了简洁且易于理解的解决方案，为开发者在处理 this 指向问题时提供了参考。

vuex dispatch和commit 的区别

       dispatch：异步操作，

        commit ：同步操作

        为什么dispatch是异步而commit是同步呢？

        首先，dispatch是去分发一个action的。而commit则是去调用mutations的，那这两个玩意儿又有啥区别呢

        action： 用于调用mutations去变更state。

        自身会返回一个promise，

        支持异步操作

        mutations：修改数据，不支持异步，只是一个单纯的函数。

        为什么action支持异步而mutations不支持异步呢？

        因为如果mutations支持异步的话，那数据将会变得难以跟踪。因为异步存在着很多不确定性。你不知道数据啥时候返回，不知道成功与否。所以这也注定了mutations必须是个同步操作。

        但是当我们需要用到异步去获取数据提交数据的时候又该怎么办呢，action的出现就完美的解决了这些问题。所以action不能直接操作数据，他必须通过mutations去操作数据。但是他支持异步操作。所以这俩兄弟是相辅相成的。

        回到上一个问题。正因为action支持异步，所以分发他的api dispatch也就是一个异步操作，而commit也就是一个同步操作了。