Vuex source debugging steps

How to debug

1. GitHub download vuex source code.

2. Import the vuex project using vscode and open the console. Which compiler you choose is a matter of personal preference.

3. Run the NPM I or CNPM I command to install vuEX modules.

4. Run NPM run dev to run the project. If there is Compiled successfully in the red line, the operation is successful.

5. Left-click the mousehttp://localhost:8080, open in the browser.

There are five examples on the page, all in the Examples file directory of the Vuex project.

For my personal debugging, I use Couter.

6. Found in the VUEX projectexamples/counterFile directory, openstore.jsFile.

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
})
Copy the code

You can use state, getters, Actions, and mutations directly, as well as redefine them.

7. In the Vuex project, find the SRC file directory, which is the vuex source directory.

I don’t like breaking points, so when debugging source code, are usedconsole.logPrint the data you want to view directly to the browser console. For example, if I want to look at the state, actions, and so on that I passed in when I created the Store instance object, THEN I can go to thesrc/store.jsIn the useconsole.logPrint the data to the browser console and press F12 to view it.