我有一个Web应用程序，该应用程序本质上分为两个组件：一个包含业务逻辑的JavaScript应用程序，以及一个UI层，允许用户深入研究由该应用程序生成的数据。对于UI层，我希望使用VueJS和VueX，但目前我想知道将JS应用程序中的数据集成到VueJS堆栈中的最佳实践。
我尝试过的一种方法是将对应用程序核心类的引用作为SELECT DBS.NAME AS OWNER,
TBLS.TBL_NAME as OBJECT_NAME,
TBL_COMMENTS.TBL_COMMENT as OBJECT_DESCRIPTION,
TBLS.TBL_ID as OBJECT_ID,
TBLS.TBL_TYPE as OBJECT_TYPE,
'VALID' as OBJECT_STATUS,
COLUMNS_V2.COLUMN_NAME,
COLUMNS_V2.COMMENT as COLUMN_DESCRIPTION,
COLUMNS_V2.TYPE_NAME AS DATA_TYPE,
'Y' as NULL_IND,
'N' as PRIMARY_KEY_IND,
TBLS.CREATE_TIME as LAST_DDL_TIME
FROM DBS
JOIN TBLS
ON DBS.DB_ID = TBLS.DB_ID
JOIN SDS
ON TBLS.SD_ID = SDS.SD_ID
JOIN COLUMNS_V2
ON COLUMNS_V2.CD_ID = SDS.CD_ID
JOIN (SELECT DISTINCT
TBL_ID,
TBL_COMMENT
FROM (SELECT TBLS.TBL_ID TBL_ID,
TABLE_PARAMS.PARAM_KEY,
TABLE_PARAMS.PARAM_VALUE,
CASE WHEN TABLE_PARAMS.PARAM_KEY = 'comment'
THEN TABLE_PARAMS.PARAM_VALUE
ELSE ''
END TBL_COMMENT
FROM TBLS
JOIN TABLE_PARAMS
ON TBLS.TBL_ID = TABLE_PARAMS.TBL_ID) TBL_COMMENTS_INTERNAL) TBL_COMMENTS
ON TBLS.TBL_ID = TBL_COMMENTS.TBL_ID;
传递给我的Vue实例，就像这样：
data这使我可以将实例作为this.vue = new Vue({
el: '#ui-container',
store,
template: '<UI :app="app"/>',
components: { UI },
data: {
app: app
}
});
传递给我的各个子组件，并且确实可以正常工作。但是，有没有更好/更有效的方法来解决这个问题？
我目前正在使用VueX来维护有关UI各个部分的状态-我应该在此处保留应用程序引用吗？如果是这样，最好的处理方式是什么，同时当应用程序实例中的数据发生更改时使我的组件能够重新呈现？