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>

实际上，我有多个单个文件组件需要使用store中的contacts 。 但是，我不确定在每个组件中使用它们的最有效方法是什么。 由于每个组件都有自己的隔离范围，所以如果我使用props或data选项，我会为每个组件重新创建我的contacts数组。 这似乎很昂贵。 或者，我误解了什么。

当我已经在中央数据存储中定义数组时，与多个组件共享数组的最有效方法是什么？

谢谢！

Answer 1

典型的方法是在组件中使用mapState助手。 例如

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

这会将您商店中的contacts状态映射到组件中的计算属性contacts 。

Answer 2

Vuex 仅在多个组件之间有效地共享一个状态实例（它是应用程序中的单一事实来源）。 所以你不应该担心这种情况下的性能。 Vue 在处理更改的方式上也非常聪明，只重新创建实际更改的组件部分。 去做吧，你永远不会后悔从 Vuex 开始。