Question

我有import QtQuick 2.9 import QtQuick.Controls 2.2 //import QtQuick.Controls 1.4 ApplicationWindow { visible: true width: 640 height: 480 title: qsTr("Scroll") ScrollView { anchors.fill: parent ListView { anchors.fill: parent model: 20 delegate: Text { text: "Item " + (index + 1) height: 50 width: parent.width } } } }我集中了所有网站数据，这个对象实际上非常大。在不同的页面中，用户需要搜索数据，同时必须对结果进行分页。

为了显示所有数据，我以一种将Vuex.Store和length保留在组件中的方式对我商店中的特定对象数组进行分区，然后遍历由totalPages。

但是，为了进行搜索，我在Vuex模块中创建了一个action，它接受一个参数并将对象数组中的项目与之进行比较，最后返回一个promise。

实际问题是，然后我在我的组件中为搜索的项目创建一个临时数组，然后重新分配Vuex和length值。我觉得这个临时数组是多余的，只会增加DOM的大小，我觉得这是一个坏主意。

发布此问题的关键是要知道，这种方法是否会被视为标准解决方案，或者是否有更好的方法来搜索大型存储库。

Answer 1

让我们以一个简单的博客为例。

我们有以下几页：

/博客/页面/ 1 /博客/页/ 4

/鼻涕虫的最后 /段塞的-另一个-交

我的Vuex商店有以下键：

{
    posts: {},
    pages: {},
}

现在，当用户访问/ blog / page / 1时，我从API获取该页面的所有数据并将每个帖子存储在posts对象中，而在pages对象中，我只存储对该帖子的引用。这是商店在进入/ blog / page / 1后的样子

{
    posts: {
        'blog-post-example': {
            id: 1,
            title: 'test'
        },
        'another-blog-post-example': {
            id: 2,
            title: 'another title'
        }

    },
    pages: {
        1: [
            'blog-post-example',
            'another-blog-post-example'
        ]
    },
}

如果他们转到下一页＆＃34; / blog / page / 2＆＃34;也会发生同样的情况。

但是，如果他们回到＆＃34; / blog / page / 1＆＃34;，我可以检测到该页面的数据已经被提取，我不需要回到API。

通过这种方式，您可以平滑用户体验，而无需立即将所有博客帖子加载到商店中。

希望有所帮助。

在大对象数组中搜索

1 个答案: