Vuex 스토리지의 데이터가 vue 구성 요소에 표시되지 않음

Vuex 스토리지의 데이터가 vue 구성 요소에 표시되지 않음

Vuex 스토리지에는 ID별로 개체를 반환하는 getter가 있습니다.하지만 저는 게터의 데이터를 사용할 수 없습니다.

computed를 사용하는 경우: 컴포넌트가 렌더링된 후 getter에서 데이터가 전송되며 DOM은 비어 있습니다(vue devtools에서 컴포넌트를 클릭하지 않을 때까지).클릭하면 계산된 실행이 다시 생성되고 요소가 다시 그려지며 data()의 데이터로 다시 작성됩니다.

data() 오브젝트 정의 중에 getter를 직접 호출하면{{ cardData.content }}DOM은 금방 알 수 없습니다.this.cardData.title오류를 반환하다Cannot read property 'title' of undefined.왜요?

Vuex 스토리지

export const store = new Vuex.Store({
    state: {
        "cards": [
            {
                "position": null,
                "title": "Head Text",
                "id": 132,
                "content": "LoremIpsum",
                "type": "text",
            },
            {
                "position": null,
                "title": "Head Text 2",
                "id": 138,
                "content": "LoremIpsumLoremIpsum",
                "type": "text",
            }
        ]
    },

    getters: {
        cards: (state) => state.cards
    }
});

vue 컴포넌트,

<template>
<div>
  <h1>{{ cardTitle }}{{ cardTitle2 }}</h1>
  <div>{{ cardData.content }}</div>
</div>
</template>


<script>
  export default {
    props: ['id'],
    data() {
      return {
        cardData: this.$store.getters.cards.find((card) => card.id == this.id),
        cardTitle: this.cardData.title,
        cardData2: null,
        cardTitle2: null
      }
    },
    computed: {
      GetData: function() {
        this.cardData2 = this.$store.getters.cards.find((card) => card.id == this.current);
        this.cardTitle2 = this.cardData2.title;
      },
    } 
  }

</script>

원하는 제목을 반환하는 계산된 속성을 갖는 것이 아니라 다음과 같이 할 수 있습니다.

computed: {
  cardTitle: function() {
   var card = this.$store.getters.cards.find((card) => card.id == this.current)
   return card.title
  },
} 

이제 사용할 수 있습니다.{{this.cardTitle}}DOM 에 있습니다.

Vue 구성 요소로 Vue 상태 가져오기

그러면 Vue 컴포넌트의 스토어 내 상태는 어떻게 표시됩니까?Vuex 스토어는 반응적이기 때문에 Vuex 스토어에서 상태를 "검색"하는 가장 간단한 방법은 단순히 계산된 속성 내에서 일부 저장소 상태를 반환하는 것입니다.

vuex 상태의 카드 어레이가 있고 데이터 방법을 사용하여 어레이를 반환합니다.그것은 이 사건을 처리하는 적절한 방법이 아니다.계산된 방법을 getter로 사용해야 합니다.언제든지this.$store.state.card변경 시 계산된 속성이 재평가되고 관련 DOM 업데이트가 트리거됩니다.

 computed: {
    cardData() {
      return this.$store.getters.cards
    }
  }

또한 컴포넌트 템플릿에서는 cardData 어레이의 속성(제목, 콘텐츠, 유형, ID 등)을 표시할 수 있습니다.어레이 내의 모든 속성에 대해 cardTitle, cardId, cardType 변수를 작성할 필요는 없습니다.cardData 뒤에 속성을 추가합니다.

<template>
  <div class="card">
  <h1>{{ cardData.title }}</h1>
  <p>{{ cardData.content }}</p>
  </div>
</template>

다음은 ID별로 필터링된 cardData 배열의 jsFiddle 예입니다.

vue.js 설명서 홈페이지에 나와 있는 대로 v-for를 사용하여 어레이를 루프하는 것이 더 효율적입니다.

computed: {
     cards () {
          return this.$store.getters.cardData
     }
}

this.$store.getters.card 계산 데이터는 getters에서 초기화된 데이터입니다.즉,

getters: {
    cardData: (state) => state.cards
}

이렇게 말합니다.

state: {
    cards: []
}

그런 다음 템플릿 태그에서 다음과 같이 데이터 집합 어레이를 루프할 수 있습니다.

<template id="insert id here">
    <ul v-for"card in cards" :key="card.id">
       <li> {{ card.title }}</li>
       <li> {{ card.content }}</li>
    </ul>
</template>

언급URL : https://stackoverflow.com/questions/41595009/data-from-vuex-storage-are-not-displayed-in-the-vue-component