Solved those puzzles

  1. Why can a component access vuex registered data via this.$store.state
  2. Using this.codestore.mit () triggers the appropriate mutation to update state

Let’s start with the basic use of vuex

  1. The first thing to do is download the plug-in,
  2. Vue.use(vuex) registeredThe plug-in
  3. Declare that the instance is mounted to the root component
import Vue from 'vue'
import Vuex from 'vuex'

Vue.use(Vuex)

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

new Vue({
  el: '#app'.store: store,
})
Copy the code
  1. It can then be accessed in the component
methods: {
  increment() {
    this.$store.commit('increment')
    console.log(this.$store.state.count)
  }
}
Copy the code

What happened to Vuex. Use (Vuex)

First, this method calls the plug-in’s Install method

The install method is in the directory/SRC /store.js

export function install (_Vue) {
  // Ensure that plug-ins are downloaded only once
  if (Vue && _Vue === Vue) {
    if (__DEV__) {
      console.error(
        '[vuex] already installed. Vue.use(Vuex) should be called only once.')}return
  }
  Vue = _Vue
  // Execute the initialization method, the key point
  applyMixin(Vue)
}
Copy the code

Then see what the applyMixin method does (just take the core code from the source code), the key that can be accessed through this.$store.state

export default function(Vue) {
    // Globally mix in a basic hook function before each component instance is built
    // Execute the vuexInit initialization function
    Vue.mixin({ beforeCreate: vuexInit})
    
    function vuexInit () {
        const options = this.$options
        // store injection
        // Give each component $store so that the value can be retrieved from this.$store.state
        // If the component has a store configuration item, set this.$store to options.store, or fetch it from the parent component
        if (options.store) {
          this.$store = typeof options.store === 'function'
            ? options.store()
            : options.store
        } else if (options.parent && options.parent.$store) {
          this.$store = options.parent.$store
        }
      }
}
Copy the code

Why does a CommiIT trigger trigger the mutation update state of the response

Simplify the relevant code in the source code

export class Store {
    constructor (options = {}) {
      // Get the commit in the instance first, and then call its own commit function
      const { commit } = this;
      this.commit = function boundCommit (type, payload, options) {
        return commit.call(store, type, payload, options)
      }
    }
    commit (_type, _payload, _options) {
      Mutations are mutations. Mutations are mutations. Mutations are mutations
      const entry = this._mutations[type]
      // execute mutations corresponding to type
      entry.forEach(function commitIterator (handler) {
        handler(payload)
      })
    }
}
Copy the code

The most basic should be this, the source code or have to look slowly, can not be urgent, please cross the road big guy criticism

Vuex source code is attached here