Vuex principle

1. What is Vuex?

Academic:Vuex is a state management model developed for Vue.js applications ; centrally stores and manages the state of all components of the application.

Understanding: The above 4 words are the key to our understanding. Status: What is status, we can understand it as data in general. Vue only cares about the view layer , so how is the state of the view determined? We know that it is driven by data, and the state management here can be simply understood as managing data. Centralized storage: Vueonly care about views, then we need a warehouse ( Store) to store data, and all data are centrally stored, views and data can be analyzed. Management: In addition to storage, you can also manage data, that is, calculate and process data. All components state: The components used share a warehouse ( Store), that is, a project has only one data source (distinguishing modules modules).

Summary: Vuex is a warehouse that provides the only management data source in a project.

2. What is the use? scenes to be used?

Scenario 1: The processing of multiple components depends on the same data, for example, a bar chart and a bar chart both display the same data;

Scenario 2: The behavior of one component - changing data - affects the view of another component, which is actually the data of public dependencies;

VuexThe common data of components is extracted and managed in a common warehouse, which makes it easy for each component to obtain ( getter) data, and easy to set data ( setter).

3. First look at the source code

This is Vuexthe source code file, which contains five parts in total, Pluginstwo injection files, core files index, help files helper, tool filesutil.js

Let's first look at the framework of the Index.js file export, and then analyze it in detail.

?
1
2
3
4
5
6
7
8
export default {
   Store, 
   install,
   mapState,
   mapMutations,
   mapGetters,
   mapActions
         }

The following article analyzes the Storewarehouse.

The above is the whole content of this article, I hope it will be helpful to everyone's learning, and I hope everyone will support Scripting Home.

 

Original link: https://segmentfault.com/a/1190000009096457

Guess you like

Origin http://43.154.161.224:23101/article/api/json?id=324767587&siteId=291194637