Vuex - 구성 요소 간에 어레이를 효율적으로 공유

Vuex - 구성 요소 간에 어레이를 효율적으로 공유

Vue.js 앱이 있습니다.이 앱에는 여러 개의 단일 파일 구성 요소에서 사용할 항목이 있습니다.이 배열은 상당히 클 수 있습니다.그런 이유로, 저는 메모리에 있는 어레이의 인스턴스를 줄이려고 합니다.

이 어레이를 구성 요소 간에 공유할 예정이기 때문에 중앙 집중식 스토어가 적합하다고 생각했습니다.이러한 이유로 저는 Vuex를 통합하기 시작했습니다.

내 앱에는 다음이 있습니다.

import Vuex from 'vuex';
Vue.use(Vuex);

const store = new Vuex.Store({
  state: {
    contacts: [
      // large number of JSON objects here.
    ]
  }
}); 

const app = new Vue({
    store,
    el: '#myApp',    
    data: {},

    created: function() {
    }
});

다음과 같은 단일 파일 구성 요소가 있습니다.

<template>
    <div>
      <table>
        <thead>
          <tr>
            <th>First Name</th>
            <th>Last Name</th>
            <th>Email</th>
          </tr>
        <thead>

        <tbody>
          <tr v-for="contact in contacts">
            <td>{{ contact.firstName }}</td>
            <td>{{ contact.lastName }} </td>
            <td>{{ contact.email }} </td>
          </tr>
        </tbody>
      </table>
    </div>
</template>

<script>
    export default {
        data: function() {
            return {};
        }
    };
</script>

실제로 사용해야 하는 단일 파일 구성 요소가 여러 개 있습니다.contacts에서store하지만 각 구성 요소에서 가장 효율적으로 사용할 수 있는 방법이 무엇인지 잘 모르겠습니다.각 구성 요소에는 고유한 격리된 범위가 있기 때문에 사용하면props또는data옵션, 나는 나의contacts각 구성 요소의 배열입니다.이것은 비싼 것 같습니다.아니면, 제가 뭔가를 오해하고 있습니다.

중앙 데이터 저장소에서 어레이를 이미 정의한 경우 어레이를 여러 구성 요소와 공유하는 가장 효율적인 방법은 무엇입니까?

감사해요!

일반적인 접근 방식은 구성 요소에서 도우미를 사용하는 것입니다.예를들면

import { mapState } from 'vuex' 
export default {
  computed: mapState(['contacts'])
}

이것은 지도를 만들 것입니다.contacts스토어에 있는 상태를 계산된 속성으로 표시 contacts사용자 구성요소에 있습니다.

Vuex는 여러 구성 요소 간에 상태 인스턴스를 하나만 효과적으로 공유합니다(앱의 단일 정보원).따라서 이 경우 성능에 대해 걱정할 필요가 없습니다.또한 Vue는 실제로 변경된 구성 요소만 다시 생성하여 변경 사항을 처리하는 방식도 매우 영리합니다.Vuex에서 시작한 것을 후회하지 않을 것입니다.

언급URL : https://stackoverflow.com/questions/50751508/vuex-efficiently-sharing-an-array-across-components