What is the best place for static data?

[abitrolly]

I've heard it is a bad practice to put static JSON for lookups into data:, because Vue will make this data reactive. Where to place such data then?

[chenxch]

I think this should depend on whether your data needs to be used directly in the template. If you can directly consider returning this static data through a calculated property or function introduction, it is also possible in data, but you need to perform a freezing operation on it, such as Object. freeze(this.data.xx).

[abitrolly]

The data is used directly in the template.

https://gitlab.com/gitlab-community/community-projects/merge-request-leaderboard/-/blob/ec418f657dcd316cfd94763b55793b01f7692626/src/App.vue#L6-28

So what should be the best practice here?

[chenxch]

const links = [
    {
      name: 'FY24Q2 Hackathon',
      startDate: '2023-07-09',
      endDate: '2023-07-16',
      cutoffDate: '2023-08-16',
      label: 'Hackathon'
    },
    {
      name: 'FY24Q1 Hackathon',
      startDate: '2023-04-23',
      endDate: '2023-04-30',
      cutoffDate: '2023-05-30',
      label: 'Hackathon'
    },
    {
      name: 'FY23Q4 Hackathon',
      startDate: '2022-11-29',
      endDate: '2022-12-07',
      cutoffDate: '2023-01-30',
      label: 'Hackathon'
    },
  ],
Export default {
  name: 'App',
  methods: {
   getLinks(){
   return links 
  }
 }
}

<template v-for="(link, index) in getLinks()" :key="index">
      <a :href="getLinkUrl(link)">
        {{ link.name }}
      </a>
      &nbsp;||
    </template>

[abitrolly]

Am I right that template code doesn't have access to global scope links list, and that's why getLinks() method is needed?

[chenxch]

Yes, or returned by a computed property, there is no need to execute the function.

[chenxch]

or this option

const links = [
    {
      name: 'FY24Q2 Hackathon',
      startDate: '2023-07-09',
      endDate: '2023-07-16',
      cutoffDate: '2023-08-16',
      label: 'Hackathon'
    },
    {
      name: 'FY24Q1 Hackathon',
      startDate: '2023-04-23',
      endDate: '2023-04-30',
      cutoffDate: '2023-05-30',
      label: 'Hackathon'
    },
    {
      name: 'FY23Q4 Hackathon',
      startDate: '2022-11-29',
      endDate: '2022-12-07',
      cutoffDate: '2023-01-30',
      label: 'Hackathon'
    },
  ],
Export default {
  name: 'App',
 data(){
  return {
  links: Object.freeze(links)
}
}
 }
}

demo

[abitrolly]

Looks like computed is better than method, because computed call is cached https://vuejs.org/guide/essentials/computed.html#computed-caching-vs-methods Not sure if retrieving the list from the cache is not the same as returning it from the method.