多选项卡破折号应用程序：将“dcc.Store”组件放在不同的选项卡中

Question

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

index.py
app.py
- 标签
  - tab1.py
    - 子tab1.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 中甚至在 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 的数据，因此您可以为 tab 3 的布局输入 2 个对应于 dcc.Store 组件的数据对应于 tab 1 和 tab 2。但是，另一种方法可能是 dcc.Store 是一个字典，其键 tab 1 和 tab 2 对应于您要从每个选项卡存储的数据。从性能的角度来看，我不确定一种方法是否会比另一种方法好得多，但我个人更喜欢每个“用户输入集合”选项卡的不同 dcc.Store，我随后可以在我的“compile/output/visualization" 标签为了组织起见。如果这对您的应用程序有意义，它还允许您以不同方式（例如每个会话或内存）保存来自不同选项卡的信息。

多选项卡破折号应用程序：将“dcc.Store”组件放在不同的选项卡中

Multi-tab dash app : Placing `dcc.Store` component in different tabs

python

plotly

plotly-dash