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

Question

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

• 索引.py
• 应用程序.py
  • 选项卡
    • tab1.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.Graphanddata-table和 'subtab2.py contains a series of dcc.Graph组件。

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

Answer 1

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

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

此外，当您单击新选项卡时，如果您希望数据保留在您放入的数据中，dcc.Store则index.py需要在新选项卡上重新加载它。请参阅此处的“页面加载更新”部分 ( https://dash.plotly.com/live-updates )，了解如何将布局构建为函数。这样，您可以dcc.Store在重新加载选项卡时向其提供内容，以便您可以维护从用户首次访问选项卡时收集的数据。

我可能还建议dcc.Store每个选项卡使用不同的选项卡，所有选项卡都存储在index.py. 这可能会简化您必须传递到不同选项卡的内容。例如，如果您收集的一些数据tab 1与您从 收集的数据无关tab 2，那么您不需要将dcc.Storefrom传递tab 1到 intotab 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每个“用户输入集合”选项卡都有不同的方法，我随后可以在“编译/输出/可视化”选项卡上使用它组织的缘故。它还允许您以不同的方式保存来自不同选项卡的信息（例如每个会话或内存），如果这对您的应用程序有意义的话。