Vuex 4源码学习笔记 - Vuex是怎么与Vue结合？（三）

在上一篇笔记中：Vuex源码学习笔记 - Vuex开发运行流程（二）

我们通过运行npm run dev命令来启动webpack，来开发Vuex，并在Vuex的createStore函数中添加了第一个断点。

那么在看源码之前，建议先要熟悉Vuex的使用，如果还不熟练使用，那么在看的时候很容易会发蒙。

我们来复习下Vuex中的几个重要概念和使用

• State - 存储状态
• Getter - 类似计算属性
• Mutation - 更改状态的唯一方法是提交 mutation。
• Action - 可以包含任意异步操作，并且提交 mutation来更改状态。
• Module - 用来分割模块，每个模块拥有自己的 state、mutation、action、getter、甚至是嵌套子模块。

下面是计数器应用的Vuex代码

import {
   
    createStore } from 'vuex'

const state = {
   
   
  count: 0
}

const mutations = {
   
   
  increment (state) {
   
   
    state.count++
  },
  decrement (state) {
   
   
    state.count--
  }
}

const actions = {
   
   
  increment: ({
    
     commit }) => commit('increment'),
  decrement: ({
    
     commit }) => commit('decrement'),
  incrementIfOdd ({
    
     commit, state }) {
   
   
    if ((state.count + 1) % 2 === 0) {
   
   
      commit('increment')
    }
  },
  incrementAsync (