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

Question

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

• index.py

• app.py

• tab1.py

• tab2.py

• subtab1.py

• subtab2.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那么当您导航到不同的选项卡时，这些存储的组件将消失并重置，而当您返回到第一个选项卡时，这些存储的组件将丢失。此外，当您单击新选项卡时，如果您希望数据保留在您放入的数据中，则dcc.Store需要index.py在新选项卡上重新加载它。这样，您可以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每个“用户输入集合”选项卡都有不同的方法，我随后可以在“编译/输出/可视化”选项卡上使用它组织的缘故。它还允许您以不同的方式保存来自不同选项卡的信息（例如每个会话或内存），如果这对您的应用程序有意义的话。