VUEX 3.x源码分析——4. 理解Action

重生之我是蔡经理

已于 2024-06-20 21:04:22 修改

阅读量903

点赞数 30

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

于 2024-05-29 22:51:25 首次发布

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

版权

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

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

本章只讲解vuex中的Action，这也是vuex官网中“核心概念”的第四个。
想了解vuex中的其他源码分析，欢迎参考我发布的下列文章：
VUEX 3 源码分析——1. 理解State
VUEX 3 源码分析——2. 理解Getter
VUEX 3 源码分析——3. 理解Mutations
VUEX3 源码分析——4. 理解Action
VUEX 3 源码分析——5. 理解Module
VUEX 3 源码分析——6. 理解命名空间namespace
VUEX 3 源码分析——7. 模块的动态注册和卸载

官网示例

先看一下官网示例：
在actions上定义函数，函数接受一个context对象，这个对象可以调用commit，state和getters。（官方说context对象不是store实例本身，等会看内部的实现源码就能更直观地感受到了）
action通过dispatch方法触发
辅助函数 mapActions
如果你看过我之前分析的两篇文章（理解Getter 和理解Mutations），就能发现action的功能和getter，尤其是mutation大同小异，只是action能进行异步操作嘛。那JavaScript里面，哪种语法适合异步操作能——当然是Promise啦。
所以通过深入分析开源项目中的特定功能，我们可以洞察到项目背后的统一设计思想。
理解这一设计思想不仅有助于我们掌握单个功能的具体实现，还能帮助我们预测和理解其他功能的设计模式。
此外，阅读和学习优秀的开源项目，能够显著提升我们的代码理解能力和审美水平，从而在软件开发实践中，更好地应用这些设计原则和模式。

const store = new Vuex.Store({
   
  state: {
   
    count: 0
  },
  mutations: {
   
    increment (state) {
   
      state.count++
    }
  },
  actions: {
   
    increment (context) {
   
      context.commit('increment')
    }
  }
})

store.dispatch('increment')

初始化Actions

之前的Getter和Mutation初始化工作，都是在installModule函数中执行的，action也必然在此。
Store类初始化一个无原型链对象 this_actions：this._actions = Object.create(null)
将用户定义的action按key-value格式，存储进 this._actions[key] 中，其中的每个key对应一个数组，数组中的元素为函数，每个函数都返回一个执行action的Promise