多选项卡应用程序：将`dcc.Store`组件放置在不同的选项卡中 [英] Multi-tab dash app : Placing `dcc.Store` component in different tabs

问题描述

关于在多页签结构应用程序中使用dcc.Store的问题。我希望持久化/存储在选项卡之间切换的数据。我的多页/选项卡式应用程序结构如下：

• index.py
• app.py
  • 制表符
    • tab1.py
      • subtab1.py
      • subtab2.py
    • tab2.py

index.py根据选择呈现每个文件的布局。

app.layout = html.Div([

    # tabs
    html.Div([

        dcc.Tabs(

            id="tabs",
            vertical=True,
            className="mb-3",
            persistence=True,

            children=[


                 dcc.Tab(label="tab1", value="tab1",
                         children=[dcc.Tabs(id="subtabs", persistence=True, 
                            children=[dcc.Tab(label='subtab1', value='subtab1'),
                                      dcc.Tab(label='subtab2', value='subtab2')
                            ],

                    )
                 ]),
                 dcc.Tab(label="tab2", value="tab2"),

            ],
            
        )

        ],

        className="row tabs_div"

    ),

        

        # Tab content
        html.Div(id="tab_content"),

])

现在，我想在不同的子选项卡之间交换组件状态/数据。subtab1.py包含dcc.Graph和data-table和‘subtab2.py contains a series of dcc.Graph组件。

我是否需要同时在subtab1.py和subtab2.py中添加dcc.Store组件以存储单个组件并从中读取？我希望能够读取subtab2.py和其他文件中subtab1.py的组件状态。

推荐答案

您将希望将dcc.Store组件托管在index.py文件中，而不是您的某个选项卡中。

这是因为当您切换选项卡时，html.Div(id="tab_content")中的所有内容都将消失，成为新的选项卡。如果您在subtab1.py和subtab2.py中添加dcc.Store组件，甚至在tab1.py或tab2.py中添加dcc.Store组件，则这些存储的组件将在您导航到其他选项卡时消失并重置，并在您返回到第一个选项卡时丢失。假设您使用的是"；方法1.此处所述的回调内容(https://dash.plotly.com/dash-core-components/tabs)。

此外，当您单击到新选项卡时，如果希望数据从您在dcc.Store中放入的内容保留下来，则需要将其重新加载到新选项卡上。有关如何将布局构建为函数的信息，请参阅一节(https://dash.plotly.com/live-updates)。这样，您可以在重新加载选项卡时向其提供dcc.Store的内容，以便维护从用户第一次使用该选项卡时收集的数据。

我可能还建议使用不同的dcc.Store每个选项卡，所有这些都存储在index.py中。这可能会简化您必须传递到不同选项卡的内容。例如，如果您在tab 1上收集一些独立于从tab 2收集的数据的数据，则不需要将dcc.Store从tab 1传递到tab 2来缓存tab 2数据。但是，您的tab 3可能需要来自tab 1和tab 2的数据，因此您可以有两个输入到tab 3的布局，这两个输入对应于tab 1和tab 2对应的dcc.Store组件。但是，另一种方法可能是有一个dcc.Store，即一个字典，其关键字tab 1和tab 2对应于您想要从每个选项卡中存储的数据。从性能角度来看，我不完全确定一种方法是否会比另一种方法好很多，但我个人更喜欢针对每个用户输入集合使用不同的dcc.Store选项卡，以后我可以在我的"；编译/输出/可视化&q；选项卡上使用该选项卡，以便于组织。它还允许你以不同的方式保存不同选项卡中的信息(例如，每个会话或内存)，如果这对你的应用程序有意义的话。

这篇关于多选项卡应用程序：将`dcc.Store`组件放置在不同的选项卡中的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！