Где сохранить однократные данные об использовании vuejs в настройках веб-пакета

Question

Это текущая настройка, которую я имею с моим vuejs & webpack.

У меня есть файл Vue: gallery.vue

<template>
    <div id="gallery">
        <figure style="background-color:#1a1c23;">
            <img 
                src="./assets/img/someimage1.png" 
                alt="Alt text for image 1" 
                title="title text for image 1"
                data-src="./assets/link-additional-image1.png"
                data-color="#1a1c23">
        </figure>
        <figure style......
        </figure>
        // A large number of these figure elements
    </div>
</template>

<script>
import GalleryItem from './component/galleryItem.vue'

export default {
    name: 'Gallery',
    components: {
        GalleryItem
    }
}
</script>

И это файл компонента galleryItem.vue

<template>
    <figure v-bind:style="{backgroundColor:backgroundColor}">
    <img 
        v-bind:src="src" 
        v-bind:alt="alt" 
        v-bind:title="title"
        v-bind:data-src="dataSrc"
        v-bind:data-color="dataColor">
    </figure>
</template>

<script>
export default {
    name: 'GalleryItem',
    props: {
        backgroundColor: String,
        src: String,
        alt: String,
        title: String,
        dataSrc: String,
        dataColor: String
    }
}
</script>

Вместо этого я хочу иметь массив объектов, как показано ниже, и рекурсивно создавать компоненты galleryItem в компоненте галереи, используя этот массив.

Как этого добиться?Я не знаю, где сохранить массив и как передать его компонентам vue, я думал, что массив будет в отдельном файле javascript.

Или это неправильный подход?

var a = [
{
    backgroundColor: "#480572",
    src: "./assets/img/someimage1.png",
    alt: "Alt text for image 1",
    title: "title text for image 1",
    dataSrc: "./assets/link-additional-image1.png",
    dataColor: "#ebebf7"
},
{
    backgroundColor: "#2A3132",
    src: "./assets/img/someimage2.png",
    alt: "Alt text for image 2",
    title: "title text for image 1",
    dataSrc: "./assets/link-additional-image2.png",
    dataColor: "#FFFFFF"
},
....
// A large number of these items
]

Answer 1

Да, вы можете сохранить его в отдельный файл js и импортировать оттуда.

//../assets/gallery.js or where ever you want to save the file

export const gallery = [
{
    backgroundColor: "#480572",
    src: "./assets/img/someimage1.png",
    alt: "Alt text for image 1",
    title: "title text for image 1",
    dataSrc: "./assets/link-additional-image1.png",
    dataColor: "#ebebf7"
},
{
    backgroundColor: "#2A3132",
    src: "./assets/img/someimage2.png",
    alt: "Alt text for image 2",
    title: "title text for image 1",
    dataSrc: "./assets/link-additional-image2.png",
    dataColor: "#FFFFFF"
},
....
// A large number of these items
]

В компоненте галереи

<script>
import GalleryItem from './component/galleryItem.vue'
import { gallery } from '../assets/gallery.js'

export default {
    name: 'Gallery',
    data() {
       return {
          gallery
       }
    },
    components: {
        GalleryItem
    }
}
</script>