“This is the 27th day of my participation in the First Challenge 2022. For details: First Challenge 2022”

Simulation Vuex

In this chapter, you need to install and store Vuex by hand

The install method

Install is a method required for any Vue plug-in. As we implement Vuex, we need to save the Vue instance in this method so that we can call it later. Then we need to assign store to vue.prototype. $store.

How to saveVueThe instance?

The official vUE documentation is also very clear:

Vue.js plug-ins should expose an install method. The first argument to this method is the Vue constructor, and the second argument is an optional option object

So we just need to do this:

let _Vue = null

function install (Vue) {
  _Vue = Vue
}
Copy the code

willstoreAssigned toVue.prototype.$store

After assigning store to vue.prototype. $store, all components in the project can retrieve the repository under Vuex via this.$store, thus sharing state among all components.

We can get the Vue instance by mixing in beforeCreate to get the Vue object in the options

function install (Vue) {
  _Vue = Vue
  _Vue.mixin({
    beforeCreate () {
      // If you have already registered, you do not need to register again
      if (this.$options.store) {
        _Vue.prototype.$store = this.$options.store
      }
    }
  })
}
Copy the code

This is the end of the install method

Store the class

What to include

  • State – Responsive
  • getters
  • mutations
  • actions
  • Commit to submit mutations
  • Dispatch to distribute the actions

1. You need a constructor first

  1. To obtain parameters

    Constructor, the parameter needed at initialization time

    constructor (options) {
    const {
      state = {},
      getters = {},
      mutations = {},
      actions = {}
    } = options
}
Copy the code

  2. State is converted to reactive

    Then we need to convert the state to a responsive object. We need to call an Observable to handle the data in a responsive way:

    this.state = _Vue.observable(state)
Copy the code

  3. Getters processing

    Getters is an object with methods that take the state argument and eventually return a value. Normally it does something to state and then returns, but only if we call getters will there be a value returned, so we can use Object.defineProperty to convert GET

    this.getters = Object.create(null)

Object.keys(getters).forEach(key= > {
  Object.defineProperty(this.getters, key, {
    get: () = > getters[key](state)
  })
})
Copy the code

  4. Mutations and actions only need to be stored in the corresponding methods and obtained in commit and dispatch

The main reason for naming it this way is that it doesn’t want the outside world to access it

this._mutations = mutations
this._actions = actions
Copy the code
  1. commit,dispatch
commit (type, payload) {
    this._mutations[type](this.state, payload)
}

dispatch (type, payload) {
    this._actions[type](this, payload)
}
Copy the code

Five, the summary

Finally, let’s go back to the five questions raised at the beginning of the article.

1. Q: To use Vuex, simply execute vue.use (Vuex) and pass in an example store object in the configuration of Vue. How does store implement injection?

A: The vue.use (Vuex) method performs the install method, which implements the init method encapsulation and injection of Vue instance objects, so that the incoming store object is set into the store of the Vue context. So anywhere in VueComponent you can pass through ‘this.store’. So anywhere in the Vue Component can pass through ‘this.store’. So anywhere in VueComponent you can access the store through ‘this.store’.

2. Q: When executing the dispatch action(commit), we only need to pass in (type, payload). Where does the first parameter of the action execution function store come from?

Answer: All configured action and mutation and getters are encapsulated when the store is initialized. For dispatch(‘submitOrder’, payload), all actions whose type is submitOrder are encapsulated. The first parameter is the current store object. Therefore, data such as {dispatch, COMMIT, state, rootState} can be obtained.

There are some tool functions in the source code, if interested can open the source code to see, here is not detailed.

The main purpose of our simulation in this chapter is to understand the basic working process of Vuex