多标签破折号应用程序：将 `dcc.Store` 组件放置在不同的标签中

Question

关于在多标签结构应用程序中使用dcc.Store问题。 我想在选项卡之间保持/存储数据切换。 我的多页/标签破折号应用程序结构如下所示：

• 索引.py
• 应用程序
  • 标签
    • 表1.py
      • 子表1.py
      • 子表2.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组件状态。

Answer 1

您需要在index.py文件中托管dcc.Store组件，而不是在其中一个选项卡中。

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

此外，当您单击新选项卡时，如果您希望数据从您放入dcc.Store中的dcc.Store内容中index.py您需要在新选项卡上重新加载它。 查看此处的“页面加载更新”部分 ( 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的布局有 2 个输入，这些输入对应于对应于tab 1和tab 2的dcc.Store组件。 但是，另一种方法可能是拥有一个dcc.Store ，它是一个字典，其中的tab 1和tab 2键对应于您要从每个选项卡存储的数据。 从性能的角度来看，我不完全确定一种方法是否会比另一种方法好得多，但我个人更喜欢每个“用户输入集合”选项卡使用不同的dcc.Store ，我随后可以在我的“编译/输出/可视化”中使用" 为组织起见的标签。 如果这对您的应用程序有意义，它还允许您以不同的方式保留来自不同选项卡的信息（例如每个会话或内存）。