我有一个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选项，我似乎会为每个组件重新创建我的contactsArray。这似乎很昂贵。或者，我误解了什么。
当我已在中央数据存储中定义阵列时，与多个组件共享阵列的最有效方法是什么？
谢谢！
典型的方法是在组件中使用mapState帮助程序。例如
import { mapState } from 'vuex'
export default {
computed: mapState(['contacts'])
}
这会将存储中的contacts状态映射到组件中的计算属性contacts。
Vuex 实际上只在多个组件之间共享状态的一个实例(它是应用程序中的单一事实来源(。因此，在这种情况下，您不必担心性能。Vue 在处理更改的方式上也非常聪明，只重新创建实际更改的组件部分。去吧，你永远不会后悔从 Vuex 开始。