Customize the use of vue global component use (explain the principle of())
We learned earlier that we are using other people's components: (VueRouter), (Mint), etc.
In fact, these are all global components. Here we will explain how to define a global component and explain the principle of ()
When we use Axios for interaction, we cannot use (Axios), because Axios does not install to customize a global Loading component and use:
Summary Table of Contents:
|-components
|-loading
|- Export the component and install
|- Define the Loading component, the basic style, methods and data methods mentioned in script can be used
Code in:
import LoadingComponent from './'
const Loading={
install:function(Vue){ //The core part, when we use(), install is automatically called, and the component exported by install must be a component ('loading',LoadingComponent);
}
};
export default Loading;
To be used in:
import loading from './components/loading' (loading); //The call isinstallComponents inside
Use of vuex:
Official Document:
vuex: It is mainly used to centrally manage component status (such as component display/hide, increase/decrease)
1) Start a project
2) Install vuex: cnpm install vuex -D
3) vuex provides two very good methods:
- mapActions(): You can package all methods in them. That is, manage all events (or our actions)
- mapGetters: Get all data and manage all data
4) Vuex working process:
1. When the user clicks, the increment function will be called (that is, the user has an action dispatch) mapActions will submit the function (action dispatch) to actions, and the commit parameter is passed (also a function)
Mainly deal with what you want to do, such as asynchronous requests, judgments, process control, etc. commit will submit these requests and statuses to mutations
Mainly used to deal with changes in state (data)
Get the current data, submit the status (data) to getters, and use it for mutations, let the data change, and return (reender), thereby updating the view
5) In addition to the object parameters containing commit, actions also have another parameter state (data source displayed in the Vue component). In this process, the data can be judged and corresponding operations can be made.
Example in src1/, here is the previous code not rewrite
The official document points out that the various processes of vuex work are implemented separately. Let’s do some file implementations.
Project Directory:
|--src folder
|--
|--
|--store folder
|-- // Must have it, it is where we assemble the module and export the store
|-- //It is the place where dispatch is submitted after we have action triggered
|-- // Commit submit place
|-- //Storage is where the data state is controlled, that is, how the data changes
|-- //Get the current status of the data and use it for mutations
Project link:/yufann/-and-vuex
The above is all the content of this article. I hope it will be helpful to everyone's study and I hope everyone will support me more.