代码之家 › 专栏 › 技术社区 › axelwittmann

在Vue.js应用程序中存储静态内容(如国家代码)的位置?

vuex vue.js

5

axelwittmann · 技术社区 · 8 年前

我试图找到这个问题的常见最佳实践,但我似乎找错了地方。在Vue.js应用程序中存储内容(如国家代码或任何其他静态内容,如类别数组等)的最佳做法是什么?将其保存在my.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'
...

2 回复 | 直到 8 年前

1

4

DobleL 8 年前

您可以使用 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上(注意,您也可以导入mixin来只在特定的组件中使用它- Vue Mixins )只在将要使用的组件中进行文件和导入,以避免用不需要的值重载所有组件。

2

0

allenyllee 6 年前

修改为使用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>