Vue.js 3으로 향상된 구성과 반응성을 달성하세요.

Question

Vue.js 3에서 다음과 같이 결합된 'useNumbers.js'를 고려하여 구성 요소의 '숫자'가 반응하도록 하려고 합니다. 다만, 한 컴포넌트의 '숫자'에 새로운 값을 추가해도 두 번째 컴포넌트에는 반영되지 않습니다.

useNumbers.js:

'vue'에서 { 참조 } 가져오기;

기본 함수 내보내기() {
    const 숫자 = ref([1, 2, 3, 4, 5]);

    const addNumber = 숫자 =>
        숫자.값.푸시(숫자);
    }

    const filterNumber = minNum =>
        숫자를 반환합니다.value.filter(curNum => curNum >= minNum);
    }

    반환 { 숫자, addNumber, filterNumber }
}

성분 A:

<템플릿>
    <div>
        <h1>하위 구성요소</h1>
        <p>{{ 숫자 }}</p>
        <button @click="addNumber(45)">45 추가</button>
        <div class="line"></div>
        <손자 />
    </div>
</템플릿>


<스크립트 설정>

'../composables/useNumbers'에서 useNumbers를 가져옵니다.
'./GrandChild.vue'에서 GrandChild를 가져옵니다.

const { 숫자, addNumber } = useNumbers()


<p>성분 B:</p>
<pre class="brush:php;toolbar:false;"><템플릿>
    <div>
        <h1>GreatGrandChild 구성요소</h1>
        <p>{{ 숫자 }}</p>
        <div class="line"></div>
    </div>
</템플릿>

<스크립트 설정>

'../composables/useNumbers'에서 useNumbers를 가져옵니다.

const { 숫자 } = useNumbers();


<p> 구성 요소 A에서 버튼을 클릭할 때마다(배열에 45 추가) 이 변경 사항이 구성 요소 B에 반영되지 않습니다. 구조 분해 할당과 같은 작업으로 인해 응답성이 손실된다는 것을 알고 있습니다. </p>
<pre class="brush:php;toolbar:false;">const { 숫자, addNumber } = useNumbers()

응답성이 손상되었습니다. toRef 및 toRefs를 사용하여 몇 가지를 시도했지만 아직 해결책을 찾지 못했습니다.

Answer 1

문제의 주된 이유는 useNumbers 함수가 호출될 때마다 숫자 개체의 새 인스턴스가 생성된다는 것입니다. 따라서 각 구성 요소에는 구성 요소 간에 공유되지 않는 고유한 번호 복사본이 있습니다.

스토어 이용

Answer 2

여러 useNumbers 인스턴스에서 동일한 상태를 유지하려면 상태가 한 번만 생성되도록 함수 외부로 상태를 끌어올릴 수 있습니다.

으아아아

Vue 플레이그라운드 예시