current position:Home>Store usage of vuex

Store usage of vuex

2022-01-27 01:14:24 CRMEB

Rebuild the project
Enter a folder :cd vuewebpackapp
Initialize this project :vue init webpack vuexapp
After a series of choices are confirmed
The file will be created
Operate in a built environment
The parent component passes data to the child component
stay components newly build parent.vue( Parent component ) And a son.vue Child components ;
Introduce child components into parent components import son from ‘./son’, Simultaneous transmission msg Feed component

 Insert picture description here

How the child component receives the content passed by the parent component :

 Insert picture description here

helloworld.vue
The child component transfers data to the parent component
The parent component receives data from the child component , How to set up

 Insert picture description here

Child components pass data to parent components
Set button in sub component

 Insert picture description here
 Insert picture description here

Receive... In the parent component

 Insert picture description here

Render on page

 Insert picture description here

VUEX The role of ?
For example, there are many different interfaces and components on Taobao , But every component knows my login status , Just use vuex To achieve

Used to manage status , Shared data , Manage external state between components , How to use ?
First step : introduce vuex, adopt use Method to use it ;
The second step : Create a status warehouse ;
The third step : adopt this.$store.state.xxx Get the data you need directly

// Create a status warehouse 
var store = new Vuex.Store({
    state:{
    XXX:xxx
    }
})
// Directly through this.$store.xxx Get the global status 
 Copy code 

newly build outter.vue
outter Document and parent and son file , No father son relationship , But I want them to share data , It uses vuex file ;
Install at the terminal :npm i vuex
stay main.js Introduction in Vuex:import Vuex from ‘vuex’
And then main.js in use once :Vue.use(Vuex)
Create a status warehouse
var store = new Vuex.store({ state:{ num:88 } })

 Insert picture description here

stay son.vue How to get files from files ?

 Insert picture description here

Render this calculation property to the page :

 Insert picture description here
 Insert picture description here

The code in the parent component is similar to that in the child component , It's just getNum Switch to getCount
stay outter in Is the same

 Insert picture description here

I got all three components Num:88, Realize resource sharing .

Last
If you think this article is of little help to you , Point a praise . Or you can join my development communication group :1025263163 Learn from each other , We will have professional technical questions and answers

If you think this article is useful to you , Please give our open source project a little bit star: https://gitee.com/ZhongBangKeJi/CRMEB Thank you for !

copyright notice
author[CRMEB],Please bring the original link to reprint, thank you.
https://en.cdmana.com/2022/01/202201270114226518.html

Random recommended