Vuex -跨组件高效共享数组
Vuex -跨组件高效共享数组
提问于 2018-06-08 07:38:08
我有一个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数组。这看起来很贵。或者，我误解了什么。
当我已经在中央数据存储中定义数组时，与多个组件共享数组的最有效方法是什么？
谢谢!
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/50751508
复制相关文章
相似问题