Vuex - эффективное совместное использование массива между компонентами

Question

У меня есть приложение 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 для каждого компонента.Это кажется дорогим.Или я что-то неправильно понимаю.

Какой самый эффективный способ поделиться массивом с несколькими компонентами, когда я уже определил его в центральном хранилище данных?

Спасибо!

Answer 1

Типичный подход заключается в использовании mapState помощника в вашем компоненте.Например,

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

Это отобразит состояние contacts в вашем магазине в вычисляемое свойство contacts в вашем компоненте.

Answer 2

Vuex эффективно разделяет только один экземпляр состояния между несколькими компонентами (это единственный источник правды в приложении).Таким образом, вы не должны беспокоиться о производительности в этом случае.Vue также очень умен в том, как он обрабатывает изменения, воссоздавая только те компоненты, которые действительно изменились.Просто сделайте это, вы никогда не пожалеете, начав с Vuex.