How to import a large array in Vue

Question

I have a single file component with some data:

data () {
    return {
        myArray: [obj1,obj2,...obj10000]
    }
}

Is it a good idea to have 10000 objects in the data array? If not, how can I import the large array in the single file component?

Answer 1

You can create it in a separate file and import to component.

const animals = [ //animals.js
  {name:"tiger", weight:120},
  {name:"elephant", weight:1000}
]

export default animals

In component

import animals from './path/to/animals.js'

export default {
  data() {
    return {
      animals: animals
    }
  },

Answer 2

I found that use a separate json file is a good idea.

Answer 3

Simply create a seperate file in your folder structure under /src /components or wherever.

You shall have two files

1. data.js / data.json

2. ComponentName.vue

data.js file, could also be a data.json file.

 export const data  =  [{},{},{}]
 export default data;

To import use in any vue component ----

<template></template>
<script>
import data from './components/data' 
*// in case folder structure is different use   " ../ or ./ "*
</script>