Где хранить статическое содержимое (например, коды стран) в приложении vue.js?

Question

Я пытался найти наиболее эффективный способ решения этой проблемы, но, похоже, я смотрю не в том месте.Как лучше хранить контент, такой как коды стран (или любой другой статический контент, например, массив категорий и т. Д.), В приложении vue.js?Было бы неудобно сохранять это в моем файле .env как переменную окружения, и это на самом деле не другая конфигурационная переменная.

Должен ли я просто сохранить его в Vuex, даже если это неизменные данные и не будетбыть изменены пользователем или приложением когда-либо?Или я должен просто создать свой собственный файл js и импортировать его туда, где он мне нужен?В AngularJS я просто поместил его в HelperService как функцию, и это было все ...

function getCountryArray() {
        var countries = {
              'AF': 'Afghanistan',
              'AX': 'Åland Islands',
              'AL': 'Albania',
              'DZ': 'Algeria',
              'AS': 'American Samoa',
              'AD': 'Andorra',
              'AO': 'Angola',
              'AI': 'Anguilla',
              'AQ': 'Antarctica',
              'AG': 'Antigua and Barbuda',
              'AR': 'Argentina'
...

Answer 1

Изменить для использования mixin (не глобальный mixin)

let getCountriesMixin = {
  methods: {
    getCountries: function () {
      return {
        'AF': 'Afghanistan',
        'AX': 'Åland Islands',
        'AL': 'Albania',
        'DZ': 'Algeria',
        'AS': 'American Samoa'
      }
    }
  }
};

Vue.component('test1', {
  mixins: [getCountriesMixin],
  template: '<div>test1 {{ getCountries() }}</div>',
  created() {
    console.log('test1 component: countries ->', this.getCountries());
  }
})

new Vue({
  el: '#app',
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.16/vue.min.js"></script>

<div id="app">
    <test1><test1/>
</div>

Answer 2

Вы можете сделать любое свойство / функцию доступной для каждого экземпляра (компонента) vue, используя Vue.prototype.

Vue.prototype.getCountries = {
  'AF': 'Afghanistan',
  'AX': 'Åland Islands',
  'AL': 'Albania',
  'DZ': 'Algeria',
  'AS': 'American Samoa'
};
 
Vue.component('test', {
  template: `<div>{{ getCountries }}</div>`,
  created() {
    console.log('countries ->', this.getCountries);
  }
})
 
new Vue({
  el: '#app',
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.16/vue.min.js"></script>

<div id="app">
  <test />
</div>

Другой альтернативой будет определение глобального миксина, и он будет работать так же.

Vue.mixin({
  data() {
    return {
      get getCountries () {
        return {
         'AF': 'Afghanistan',
         'AX': 'Åland Islands',
         'AL': 'Albania',
         'DZ': 'Algeria',
         'AS': 'American Samoa'
      };
    }
  }
})

Персональные предпочтения

Я предпочитаю иметь его в файле .js (обратите внимание, что вы также можете импортировать миксины, чтобы использовать его только в определенных компонентах - Vue Mixins ) и импортировать его только в тех компонентах, которые будутиспользуется, чтобы не перегружать все компоненты значениями, которые не требуются.