Javascript Vuex-跨组件高效共享阵列

我有一个Vue.js应用程序。在这个应用程序中，我有一个项目数组，我想在多个单文件组件中使用。这个数组可能相当大。出于这个原因，我试图减少内存中的数组实例

由于我打算跨组件共享此阵列，所以我认为集中存储是有意义的。出于这个原因，我开始整合

在我的应用程序中，我有以下内容：

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>

名字
姓
电子邮件
{{contact.firstName}
{{contact.lastName}
{{contact.email}
导出默认值{
数据：函数（）{
返回{}；
}
};

实际上，我有多个单文件组件，需要使用

存储

中的

联系人

。但是，我不确定在每个组件中使用它们的最有效方式是什么。由于每个组件都有自己的独立作用域，因此如果我使用

道具

或

数据

选项，我会为每个组件重新创建我的

联系人

数组。这似乎很贵。或者，我误解了什么

如果我已经在中央数据存储中定义了阵列，那么与多个组件共享阵列的最有效方式是什么

---

谢谢大家!

Vuex只在多个组件中有效地共享一个状态实例（它是应用程序中唯一的真实来源）。因此，在这种情况下，您不应该担心性能。Vue在处理更改的方式上也非常聪明，只重新创建实际更改的组件。只要去做，你永远不会后悔从Vuex开始。典型的方法是在组件中使用。比如说

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

---

这将把你商店中的

联系人

状态映射到你组件中的

联系人

。

它花了一分钟的时间与我单击。在我删除我的评论之前，您已响应：）。谢谢四位快速回复。@ZachTempleton没问题。该文档还向您展示了如何通过spread操作符将

mapState

和其他Vuex帮助程序与您自己的计算属性混合使用