템플릿에서 v-for에 있는 저장소를 직접 참조하는 Vue.js의 잘못된 관행?

템플릿에서 v-for에 있는 저장소를 직접 참조하는 Vue.js의 잘못된 관행?

첫 번째 Vue.js 어플리케이션(Vue 2.x)을 만들고 있는데, 크롤을 하기 전에 전력 질주를 시도하고 있기 때문에 여행이 되었습니다.드디어 시제품 제작이 시작되었지만, 이것으로 인해 넘어질까 봐 걱정입니다.같은 페이지의 루트 아래에 다음과 같이 두 개의 형제 구성 요소가 있습니다.

<Root>
    <TimeCreate> router-view
    <TimeIndex> = $vm0 router-view 

TimeCreate에서는 TimeIndex 내에서 페이지를 새로고침하지 않고 바로 표시할 레코드를 만듭니다.TimeCreate는 레코드를 작성한 후 디스패치된 액션을 사용하여 타임스토어를 새로고침합니다.TimeIndex에서는 다음과 같이 데이터에 시간 변수를 정의하고 있었습니다.

 data: function () {
        return {
            times: this.$store.state.userTimes,
            ...

템플릿에서 다음을 수행합니다.

<tr v-for="tm, index in times">
   ...
</tr>

하지만 TimeIndex 컴포넌트는 저장소의 데이터 변경에 "반응"하지 않았습니다. 감시자가 없었기 때문입니다.그리고 Vuex 스토어를 보는 것이 얼마나 나쁜지에 대한 SO 투고를 읽었습니다.루프용 TimeIndex 템플릿을 다음과 같이 변경했을 때:

<tr v-for="tm, index in this.$store.state.userTimes">
   ...
</tr>

갑자기 TimeIndex 템플릿에 de-facto store-watcher가 생겼고, 지금까지도 잘 작동하고 있습니다.

이 접근법에 대해 나중에 문제를 일으킬 준비가 되어 있습니까?저는 이런 일을 꽤 자주 하고 있는데(스토어 변수를 템플릿에 직접 넣는 것) 나중에 지불할 수 있을까요?도와줘서 고맙습니다.

자, 그럼 여러분의 걱정을 덜어드리기 위해

1)

data: function () {
        return {
            times: this.$store.state.userTimes,
            ...

여기서 다음 값을 할당합니다.this.$store.state.userTimes이 주소가 새 변수로 읽히는 시점에서는 값일 뿐이며, 비활성 유형이 아니면 업데이트를 받지 않습니다.초기 상태의 값 복사본을 원하고 업데이트를 받고 싶지 않다고 확신하지 않는 한 이 작업을 수행할 수 없습니다.

2)

<tr v-for="tm, index in this.$store.state.userTimes">
   ...
</tr>

Vuex에 저장된 값을 참조로 사용하면 변환에 의해 값이 변경될 때마다 업데이트를 받을 수 있습니다.계산된 속성을 단순히 값을 사용하려는 것으로 사용할 필요가 없으며 값이 변경되었을 때 컴포넌트를 사용하여 수행할 작업에 논리를 구축하지 않아도 됩니다.여기서 변수를 실제로 관찰하는 것이 아니라 스토어 내에 포함된 가치를 참조하는 것 뿐이지 여기서 마술은 발생하지 않는다는 점에 유의하십시오.

3)

이 접근법에 대해 나중에 문제를 일으킬 준비가 되어 있습니까?저는 이런 일을 꽤 자주 하고 있는데(스토어 변수를 템플릿에 직접 넣는 것) 나중에 지불할 수 있을까요?도와줘서 고맙습니다.

스토어에 현재 상태를 묻고 컴포넌트 로직 내의 참조를 사용하여 올바른 방법으로 상태를 사용하는 것이 간단한 조작과 기본 어플리케이션의 대부분의 콘텐츠에 대해 올바른 접근법입니다.

언급URL : https://stackoverflow.com/questions/51333134/vue-js-bad-practice-to-reference-store-directly-in-v-for-in-template