Import/Require JSON 文件作为 Vue 数据的克隆属性

Question

我在 Vue 中使用外部数据时遇到问题 data 属性。

考虑我的组件中的以下片段：

export default {

    data() {
        return {
            gallery: require('core-js/support/some-page-gallery.json')
        }
    },

    created() {

        // Prepare the images for the gallery
        this._buildImageURLs();

    },

    methods: {

        /**
         * Build the image urls for the gallery.
         *
         * @return void
         */
        _buildImageURLs() {

            this.gallery.forEach(image => {
                Object.entries(image.images).forEach(([key, source]) => {
                    image.images[key] = this.$staticAsset(`/assets/images/misc/${source}`);
                });
            });

        }

    }

}

上面的问题是修改this.gallery似乎修改了最初导入的数组。

结果如下：

在页面加载时，image.images[0] 等于 example.com/assets/images/misc/example.jpg
离开并返回该页面时，image.images[0] 等于 example.com/assets/images/misc/example.com/assets/images/misc/example.jpg

将 require 我的 JSON 文件作为克隆而不是参考的最佳方法是什么？假设这就是问题所在...

或者，是否有更好的方法将数据导入我的组件？

我尝试了什么？

我也尝试过使用 import 但这导致完全相同的结果。

此外，我考虑过将 this.gallery 作为参数传递给 this._buildImageURLs() 我相当有信心我可以让它工作，但我很犹豫，因为它看起来不像正确的做法。

更新

以防万一以上不清楚;我面临的问题是 this.gallery 正在充当对导入文件的引用。因此，导入的数据在我的整个应用程序中都保持其编辑状态。

当我第一次访问页面时，_buildImageURLs 方法正确地修改了数据。但是如果我导航离开，然后返回页面，修改后的数据会再次修改，导致重复修改。

Answer 1

您可以像这样使用 Object.assign 复制 gallery：

`导出默认值{

data() {
    return {
        gallery: require('core-js/support/some-page-gallery.json'),
        galleryClone: {}
    }
},

created() {

    // Prepare the images for the gallery
    this._buildImageURLs();

},

methods: {

    /**
     * Build the image urls for the gallery.
     *
     * @return void
     */
    _buildImageURLs() {
        this.galleryClone = Object.assign({}, ...this.gallery);
        Object.entries(this.galleryClone).forEach(([key, value]) => 
        {
            Object.entries(this.galleryClone[key].images).forEach(([key, source]) => {
                this.galleryClone[key].images[key] = this.$staticAsset(`/assets/images/misc/${source}`);
            });
        });

    }

}

}`

这样做是将 gallery 的值按值而不是按引用传递给 galleryClone。然后，只要您需要更新其内容，就可以在组件上使用 galleryClone 变量而不是 gallery。

Answer 2

在对 forEach 语句进行任何更改之前，您需要复制 JSON：

const GALLERY = require('core-js/support/some-page-gallery.json');

export default {

    data(){
        retrun {
            gallery: JSON.parse(JSON.stringify(GALLERY)); 
        }
    }

    //rest of your code...
}

检查这个问题：How to create and clone a JSON object?

Import/Require JSON 文件作为 Vue 数据的克隆属性

Import/Require JSON file as clone into Vue data property

javascript

vue.js

ecmascript-6

ecmascript-2016

我尝试了什么？

更新

Import/Require JSON 文件作为 Vue 数据的克隆 属性

Import/Require JSON file as clone into Vue data property

javascript

vue.js

ecmascript-6

ecmascript-2016

我尝试了什么？

更新

Import/Require JSON 文件作为 Vue 数据的克隆属性