在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

您可以使用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>

另一种选择是定义一个全局 mixin 并且以相同的方式工作。

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

个人喜好

我更喜欢将它放在 .js （注意您也可以导入 mixins 以仅在特定组件中使用它 - Vue Mixins）文件并仅将其导入到将使用的组件中，以免使所有具有不需要的值的组件过载。