2.vue 에서 vuex 를 사용 하여 형제 구성 요 소 를 실행 하 는 하위 구성 요소 방법 에 대한'스위치'방법 구현

2.vue 에서 vuex 를 사용 하여 형제 구성 요 소 를 실행 하 는 하위 구성 요소 방법-'스위치'방법 으로 가설 을 실현 하 는 것 은 다음 과 같은 구성 요소 가 있 습 니 다.관 계 는 다음 과 같 습 니 다.

component-one 에서 component-two-son 의 refresh 방법 을 실행 해 야 합 니 다.

...
<script>
	...
	export default{
		name: 'component-two-son'
    	methods:{
			refresh(){
				...
			}
		}
	}
</script>

우선 vuex store.js 에"스위치"refreshSwitch 를 설정 합 니 다.

export default{
	state:{
		refreshSwitch: 0
	},
	mutations:{
		setRefreshSwitch(state){
			if(state.refreshSwitch === 0){
				state.refreshSwitch = 1
			} else {
				state.refreshSwitch = 0
			}
		}
	},
	getters:{
		getRefreshSwitch(state){
			return state.refreshSwitch
		}
	}
}

그 다음으로 component-two-son 구성 요소 에서 watch"스위치"refreshSwitch 의 변화

 ...
 <script>
 	...
 	export default{
 		name: 'component-two-son'
 		computed: {
 			refreshSwitchStatus () {
 				return this.$store.getters.getRefreshSwitch
 			}
 		},
 		watch:{
 			//            **refresh**  
 			refreshSwitchStatus () {
 				this.refresh()
 			}
 		}
	 	methods: {
 			refresh() {
 			}
 		}
 	}
 </script>

이제 component-one 구성 요소 에서'스위치 를 누 르 면'component-two-son 의 refresh 방법 을 호출 할 수 있 습 니 다.

	...
 <script>
 	...
 	export default{
 		name: 'component-one'
 		methods: {
 			//   “  “     **refresh**  
 			callRefresh() {
 				this.$store.commit('setRefreshSwitch')
 			}
 		}
 	}
 </script>

물론 다른 구성 요소 로 확장 하여 refresh 를 호출 하 는 방법 도 마찬가지 입 니 다.필요 한 것 은'스위치'를 누 르 는 것 뿐 입 니 다.