Vue.js Vuex操作：解决嵌套承诺的最佳方法

我不熟悉JavaScript、vue.js和vuex

我试图在vuex状态数组中维护图像资源URL的列表。这些资产在一个s3存储桶中，我正在使用amplify框架来访问它

据我所知，我必须首先列出资产以获得可用的密钥

Storage.list（'assets/'）

然后我需要调用

Storage.get（）

返回URL。这两个电话都回报了承诺

我当前的vuex模块如下所示

state: {
    imageAssets: []
},

getters:{
    collection: state => state.imageAssets,
    // assetByKey: state => key => {

    // }
},

mutations: {
    setImageAssets: (state, imageAssets) => {
        Vue.set(state, 'imageAssets', imageAssets);
    },
    addImageAsset: (state, imageUrl) => {
        state.imageAssets.push(imageUrl);
    }

},

actions: {
    listAssetsS3 : (context) => {
        return new Promise((resolve, reject) => {
            Storage.list('assets/')
                .then(result => {
                        result.filter(el => /.*\.png/g.test(el.key))
                              .forEach(el => {
                            Storage.get(el.key).then(res => 
                                {
                                    context.commit('addImageAsset', res);
                                    resolve(res)
                                })
                            }) 
                },
                error => {
                    logger.debug('ERROR', error)
                    reject(error);
                })
        })
    },    

这是可行的，但我想知道这是否是正确的做法。我知道行动需要回报承诺。但是我对我的resolve命令在这种情况下的有效性有点困惑，我也想知道我的解决方案是否是最优的，是否适合vue/vuex应用程序的范例

欢迎提供任何提示、更正或一般建议

非常感谢,， M