Getting started with Vuex

Getting started with Vuex

1. What is Vuex?

Schools:Vuex IsVue.js State management mode for application development; it centrally stores and manages the status of all components of the application.

Understanding:The above four words are the key to our understanding. Status: What is status, we can generally understand it as data. Vue only cares about the view layer. How can we determine the view status? We know that it is data-driven. The State management here can be simply understood as data management. Centralized storage:VueOnly focus on the view, then we need a warehouse (StoreAnd all data is stored in a centralized manner, and views and data can be analyzed. Management: In addition to storage, you can also manage data, that is, computing and processing data. All component statuses: the components used share a warehouse (Store), That is, a project has only one data source (differentiation Modulemodules).

Summary:Vuex is a warehouse that provides unique management data sources in a project.

2. What is the purpose? Use Cases?

Scenario 1: processing multiple components depends on the same data. For example, two components, bar chart and bar chart, are both displaying the same data;

Scenario 2: the behavior of one component -- changing data -- affects the view of another component, that is, the data of Public dependency;

VuexRemove the public data of components and manage them in a public warehouse so that each component can be easily obtained (getter) Data, and easy to set data (setter).

3. Source Code Overview

This isVuexThe source code file contains a total of five parts,PluginsTwo injection files, core filesindex, Help Group documenthelper, Tool Fileutil.js

Let's take a look at the Index. js File export framework, which will be analyzed in detail later.

   export default {     Store,       install,     mapState,     mapMutations,     mapGetters,     mapActions           }

Subsequent analysisStoreRepository.

The above is all the content of this article. I hope it will be helpful for your learning and support for helping customers.