vuex 源码调试步骤-一一网

如何调试

GitHub下载vuex源码。
使用 vscode 导入 vuex 项目并打开控制台。选择什么编译软件，全凭个人喜好。
执行 npm i 或 cnpm i 命令，安装 vuex 中需要的模块。
执行 npm run dev 运行项目。若看到画红线部分Compiled successfully，则运行成功。

提示.jpg

鼠标左击http://localhost:8080，在浏览器打开。

提示2.jpg

页面上有五个案例，都在 vuex 项目的examples文件目录中。

提示3.jpg

我个人调试时，选的是Couter。

提示4.jpg

在vuex项目中找到 examples/counter文件目录，打开 store.js 文件。

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

Vue.use(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({ commit }) {
    return new Promise((resolve, reject) => {
      setTimeout(() => {
        commit('increment')
        resolve()
      }, 1000)
    })
  }
}

const getters = {
  evenOrOdd: state => state.count % 2 === 0 ? 'even' : 'odd'
}

export default new Vuex.Store({
  state,
  getters,
  actions,
  mutations
})
复制代码

你可以直接使用其已定义好的 state, getters, actions 和 mutations，也可以重新定义它们。

在vuex项目中找到 src文件目录，这是 vuex 源码目录。

提示5.jpg

本人不喜欢打断点，所以在调试源码时，都是使用 console.log 把想要观察的数据直接打印到浏览器控制台。例如，我想查看创建 store 实例对象时，传入的state, actions等对象，这时我就可以在src/store.js中，用 console.log 将数据打印到浏览器控制台，按F12查看。
提示6.jpg