Advanced vue technology stack (04. State management, Bus, state, getters) (2020-04-16 21:19)

1. Passing values ​​between child components and parent components

The child component is passed to the parent component: in the form of events

Insert picture description here
Insert picture description here

Value transfer between subcomponents of the same file

Use the parent component as an intermediary to pass the unidirectional flow
Insert picture description here

Passing values ​​between sub-components of different files (such as different components in the component, it is not convenient to write logic code in the component) [Bus]

You can use Bus to pass the value (Bus is a new Vue instance object, mounted on the global Vue original prototype object, so that you can listen to the change of the Bus data state at the root component to send and receive values)
Insert picture description here

2. Vuex state management

Work flow of Vuex

Insert picture description here

Vuex structure

Insert picture description here
Insert picture description here

------ State attribute is equivalent to (data attribute)

Defined in state.js, introduced in index.js

The first way to get the value defined in the state in the component

Insert picture description here

The second way to define the value in the state in the component (via mapState)

Insert picture description here

Can open the namespace for the module (easy access)

Insert picture description here
1.
Insert picture description here
2.
Insert picture description here

------ getters attribute is equivalent to (computed attribute)

The definition format of the getters module is as follows
Insert picture description here

The first way to get the value defined in the getters in the component

·

The second way to get the value defined in the getter in the component (using mapGetters)

Insert picture description here
2.
Insert picture description here
3.
Insert picture description here

Guess you like

Origin www.cnblogs.com/jackson1/p/12721546.html