You can read the Vuex source code to learn (a) functional carding.

lesson

With the vue-Router source code learning experience, every time you look at the serious delve into the source code will take a short time to browse through the source code. General understanding of the source code context, what each stage does, file directory division. Now LET me take you through the context of Vuex.

The difference between Vuex and VUE-Router

The core difference between Vuex and vuE-Router is that there are a number of auxiliary functions that need to be provided. This is not in the Vuex class.

So Vuex’s index.js is just an export file that prints Store, install, and all the helper functions. The index.js of vue-router is the router constructor.

Let’s take a look at Vuex’s index.js

Vue.use(Vuex)

exportdefault new Vuex.Store( { state : ... , modules : ... }) main.js // import vuex instance import store from'./store'
new Vue(
  {
    store
  }
)
Copy the code

This shows that Vuex’s core class (Store) is in the store.js file,

Next, take a look at the core store class in store.js,

This installment is simply an overview, so I’ll just look at the Store constrctor function

The procedure for the new Store first declares some space for storing mutation, action, getters, and so on, and then the key code

Generate modules and module links

Complete the links between modules. We will organize Vuex into a tree structure, if necessary (module) this._modules = new ModuleCollection(options);Copy the code

_modules places organized modules, which will be explained in more detail in the module and module linking section. Just know that Vuex initializes modules early.

Bind Dispatch and Commit methods

The dispacth and COMMIT methods are then set up

Bind this execution of both functions to a store instance, const store = this const {dispatch, commit} = this this.dispatch =function boundDispatch (type, payload) {
  return dispatch.call(store, type, payload)
}
this.commit = function boundCommit (type, payload, options) {
  return commit.call(store, type, payload, options)
}
Copy the code

InstallModule recursively registers all modules based on the state and instance of the root module

// init root module.
// this also recursively registers all sub-modules
// and collects all module getters inside this._wrappedGetters
installModule(this, state, [], this._modules.root)
Copy the code

After the module is linked, you can get a state, which is the state of the root after the module is linked. The root state and the root module are then used to initialize the root and recursively register all modules.

Resetting the VM Object

// resetStoreVM resetStoreVM(this, state)Copy the code

Reset the STORE VM object, which is also a core point. The use of the VM object and the resetStoreVM function will be described in a later section.

To register the plugin

Finally, Vuex supports various plug-ins

Last picture:

This is the basic context of Vuex’s core Store constructor. The following sections will break down each step step by step, making the progress slow and difficult. Everybody sit tight and hold on.

The next chapter covers what you do when you install