vue.js - 在 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 实例(组件)都可以访问任何属性/函数。

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 文件中(注意你也可以导入 mixin 以仅在特定组件中使用它 - Vue Mixins )文件并仅在将要使用的组件中导入它，以免使所有组件过载不需要值。