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

Question

关于在多标签结构应用程序中使用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 的组件状态。

Answer 1

您需要将 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 中的内容中，即 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 的数据，因此您可以有2 个输入到tab 3 的布局，对应于dcc.Store 组件，对应于tab 1 和tab 2 .但是，另一种方法可能是拥有一个dcc.Store，它是一个字典，其键为tab 1 和tab 2，对应于您要从每个选项卡存储的数据。从性能的角度来看，我不完全确定一种方法是否比另一种方法好得多，但我个人更喜欢每个“用户输入集合”选项卡使用不同的dcc.Store，我随后可以在我的“编译/输出/可视化”中使用它" 用于组织的标签。如果这对您的应用有意义，它还允许您以不同的方式保存来自不同选项卡的信息（例如每个会话或内存）。