A brief discussion on value transfer between Vue components (including Vuex)

<template>
    <div>
        <HELLOWORLD :needData="content"></HELLOWORLD>
    </div>
</template>

<script>
import HELLOWORLD from '../components/HelloWorld.vue'
export default {
    components:{
        HELLOWORLD
    },
    data(){
        return {
            content:"content"
        }
    }
}
</script>

<style lang="less" scoped>

</style>

<template>
    <div>
        <h1>HELLOWORLD</h1>
    </div>
</template>

<script>
export default {
    props:["needData"],
    data(){
        return {
            H:this.needData,
        }
    },
    mounted(){
        console.log(this.H);
    }
}
</script>

<style lang="less" scoped>

</style>

<template>
    <div>
        <HELLOWORLD @sendData="getData"></HELLOWORLD>
    </div>
</template>

<script>
import HELLOWORLD from '../components/HelloWorld.vue'
export default {
    components:{
        HELLOWORLD
    },
    data(){
        return {
            
        }
    },
    methods:{
        getData(sonData){
            console.log("data=>",sonData);
        },
    }
}
</script>

<style lang="less" scoped>

</style>

<template>
    <div>
        <h1>HELLOWORLD</h1>
    </div>
</template>

<script>
export default {
    data(){
        return {
            content:"content"
        }
    },
    mounted(){
        this.$emit("sendData",this.content);
    }
}
</script>

<style lang="less" scoped>

</style>

let a={
  state: {
  	name:"moduleA"
  },
  //mutations are specifically used to change the data in the state attribute mutations: {
  	setFun(state,item){
		state.name=item;
	}
  }
}

export default new Vuex.Store({
  //state is dedicated to storing datastate: {
  	num:100,
  	useAcomponent:{
		name:"A",
	},
	useBcomponent:"content",
  },
  //mutations are specifically used to change the data in the state attribute mutations: {
  	setStateFun(state,item){
		state.useBcomponent="Bcomponent";
	}
  },
  actions: {
  	httpGetData(store,item){
		setTimeout(()=>{
			console.log(item);
			store.commit("setStateFun",item);
		},3000)
	}
  },
  getters:{
  //No parameter is passed when calling the function in getters getterFun1(state){
		return state.num++
	}
  //When calling the function in getters, there are input parameters gettterFun2(state){
		return function(val){
			return state.num+=val;
		}
	}
  },
  modules:
  	ModuleA:a
  }
});
}

Data in this.$store.state.state object;
For example, let val = this.$store.state.num;

this.$store.commit("function name","data");
For example, this.$store.commit("setStateFun","testSetItem");

this.$store.dispatch("function name","data");
For example, this.$store.dispatch("httpGetData","testItem");

this.$store.getters.function name;
For example // when no parameter is entered this.$store.getters.getterFun1;
//When there is an input parameter this.$store.getters.getterFun2(123);

//Get the state data in the modules object this.$store.state.modules object name.state value;
For example this.$store.state.ModuleA.name
//Use the mutations function in the modules object this.$store.commit("function name","input parameter data");
For example, this.$store.commit("setFun","itemabc");
//It should be noted here that if there is a function with the same name in the modules module and in the external (not modules object module) mutations object, both functions with the same name will be executed when called