입문

형제 구성 요소 간의 값 교환은 Vuex와 자제store를 사용할 수 있으며, props와emit는 물통 릴레이를 하지 않습니다.
갑자기 의문이 드는 것은 여러 개의 같은 구성 요소를 사용하는데 그 동안store를 사용하면 상태를 공유할 수 있습니까?모범 사례를 찾습니다.
궁금한 게 있으면 해봐!그래서 이번 보도를 해봤어요.

실험

먼저 준비하다

이번에 사용한 구성 요소와store 모듈을 만들어 봅시다.
일단 스토어부터 만들자.
store.js

export const Store = {
  state: {
    StoreValue: "Qiita"
  },
  setStore(value) {
    this.state.StoreValue= value;
  },
  getStore(){
    return this.state.StoreValue;
  }
};

상태를 가진 것은state의 부분이며, 실제 상태를 얻거나 설정하는 것도store 제작 동작이다.
다음은 Vue의 구성 요소를 만듭니다.
먼저 HTML 섹션부터 시작합니다.
component.vue

<template>
  <div>
    <p>{{ ComponentValue }}</p>
    <button @click="onButtomClick">Click</button>
  </div>
</template>

결과를 표시하는 P 레이블과 이벤트를 트리거하는 Button 레이블이 구성되어 있습니다.
다음은 Script 섹션입니다.
component.vue

<script>
import { Store } from "./store.js";
export default {
  data() {
    return {
      StoreObject: Store.state,
    };
  },
  computed: {
    ComponentValue: {
      set(value) {
        Store.setStore(value);
      },
      get() {
        return Store.getStore();
      }
    }
  },
  methods: {
    onButtomClick(value) {
      this.ComponentValue = `${this.ComponentValue}！`;
    }
  }
};
</script>

전체적으로 이런 느낌이에요.
우리 중요한 곳을 자세히 봅시다.
component.vue

  data() {
    return {
      StoreObject: Store.state,
    };
  },

데이터 대상은 가져온 저장 상태를 가지고 있습니다.
여기에 저장하지 않으면 업데이트를 잘 반영할 수 없습니다.
component.vue

  computed: {
    ComponentValue: {
      set(value) {
        Store.setStore(value);
      },
      get() {
        return Store.getStore();
      }
    }
  }

계산 속성은 getter/setter에서store에 대한 상태 취득과 설정을 합니다.
component.vue

  methods: {
    onButtomClick(value) {
      this.ComponentValue = `${this.ComponentValue}！`;
    }
  }

에서 설명한 대로 해당 매개변수의 값을 수정합니다.
속성 계산을 통해store 값을 얻고!태그와 문자열을 조합하여store 동작을 통해 상태를 다시 설정합니다.
의 흐름.
그리고 부모님, 여러 개의 제작 부품을 배치하면 완성됩니다.
component.vue

<template>
  <div>
    <qiita></qiita>
    <qiita></qiita>
  </div>
</template>

해봤어요.

실제로 움직여 보면 클릭한 쪽도 없어!표시가 증가하기 때문에, 우리는 같은 구성 요소도store를 통해 상태를 공유할 수 있음을 발견했다.
진짜 스토어를 통해서?
그냥 같은 구성 요소라서 상태가 공유됐죠?이런 의문도 있고요.
데이터의 실례 변수를 사용해 보면 어떨까요?

실례 변수로 바꾸어 보다

component.vue

  data() {
    return {
      StoreObject: Store.state,
      childvalue:"Vue"
    };
  },

component.vue

  computed: {
    ComponentValue: {
      set(value) {
        // Store.setStore(value);
        this.childvalue= value;
      },
      get() {
        // return Store.getStore();
        return this.childvalue;
      }
    }
  }

데이터에 실례 변수를 추가하면 계산 속성의 getter/setter도 처리로 변경됩니다.
이 상태에서 어떻게 작동하는지 봅시다.

더 이상 연동하지 않겠습니다.
이것은 같은 구성 요소를 사용하더라도 모든 구성 요소는 독립된 실례라는 것을 의미한다.
그래서 위의 상태는store를 통해 공유된다고 할 수 있습니다!

총결산

같은 구성 요소라도store를 사용하면 상태를 공유할 수 있다는 것을 알게 되었다.
하지만 이걸 사용하는 상황 자체가 상당히 제한되어 있습니다. 이걸 알면 유사한 구성의 구성 요소를 추가해서 대응하는데...
이런 게 사라질 것 같아!