preface

As an important part of vUE ecology, VUex is a sharp sword for store management. In short, VUEX is vUE’s state manager. Vuex can be used to make data flow clear, traceable and predictable, and can easily realize advanced functions such as time travel. For complex large-scale applications, VUEX will become particularly important. For store segmentation, store module, store change, store tracking and other store management, using VUEX to manage store will greatly improve the stability and scalability of the project! This article will analyze the design and implementation principle of VUEX through vuEX source code!

Note: this article only shows the key core code, both for reasons of length, and to show the core code is easier to understand! Furthermore, this is an advanced vuEX article, so I don’t want to talk too much about vUe-related mechanisms and advanced use of VUEX. Please go to the official website to see!

To prepare

Analyze the composition of VUEX

Vuex introduces concepts of State and Getter to define State. Use Mutation and Action to change the state; Module is introduced for modularization segmentation of state; Introducing plug-ins to snapshot, record, and track state; MapState, mapGetters, mapActions, and mapMutations helper functions are provided to facilitate developers to deal with store in the VM. The specific relationship is as follows:

Brief analysis of the use of VUex

The usage of VUEX is very simple. For details, please refer to the official website of VUEX. In order to analyze the source code for convenience, this article only gives a brief introduction! We simply use vue’s use mechanism to inject the instantiated Store object into the vue instance! The diagram below:

The core code is as follows:


Vue.use(Vuex); // 1. Vue plug-in mechanism, install vuex
let store = new Vuex.Store({ // 2. Instantiate store and call install
 	state,
 	getters,
 	modules,
 	mutations,
 	actions,
 	plugins
});
new Vue({ // 3. Inject store and mount vue instance
	store,
	render: h= >h(app)
}).$mount('#app');

Copy the code

Questions about Vuex

While using Vuex to manage the Store, we can’t help but ask:

  • How is vuex’s Store injected into a component?
  • How are vuex state and getters mapped to individual component instances for automatic updates?

This chapter aims to solve the above questions. Let’s go deep into the principle of VUEX and uncover the mystery of VUex.

Explaining the principle of

This part will be aimed at the above questions, through source code analysis, analysis of the core code, to answer the question.

Question: How is vuex’s Store injected into components?

To answer this question, let’s start with the appearance of using vuex. From the introduction above, we know that before using Vuex, we need to install vuex! The core code is as follows:

Vue.use(Vuex); // Vue plug-in mechanism, install vuex plug-in
Copy the code

The above code benefits from the plug-in mechanism of Vue, which loads vuex when vuex’s install method is called. So let’s focus directly on the implementation of the install method, whose core code is as follows:

Vue.mixin({ beforeCreate: vuexInit });
Copy the code

Store can inject vUE instance components by using vUE mixin mechanism and vUE component lifecycle hook beforeCreate. During each VUE component instantiation, the vuexInit method is called in front of the beforeCreate hook. Next, let’s focus on the vuexInit function. The following is the core code of vuexInit!

this.$store = typeof options.store === 'function'
    ? options.store()
    : options.store
Copy the code

The core problem with this code is the pointing of this, which, thanks to the mixin mechanism, points to the VUE component instance! Finally, we can get a reference to vuex’s Store object on the vue component instance. The illustration is as follows:

conclusion

Vuex takes advantage of the mixin mechanism of vue. The hybrid beforeCreate hook injects store into the Vue component instance and registers the vuex Store reference property $store!

For answers to the rest of the questions, please go into the vuex principle (part 2)