Store usage of vuex

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

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

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

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

Receive... In the parent component

Render on page

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 } })

stay son.vue How to get files from files ？

Render this calculation property to the page ：

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

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 ！