在 vue.js 应用程序中将静态内容(例如国家代码)存储在哪里

发布于05月29日

我试图找到解决这个问题的最佳做法，但我似乎找错了地方.在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'
...

推荐答案

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

另一种 Select 是定义一个全局混合，并以同样的方式工作.

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

Personal Preference

我更喜欢把它放在桌子上.js(请注意，您还可以导入mixin以仅在特定组件-Vue Mixins中使用它)文件，并仅在将要使用的组件中导入它，以避免使用非必需的值重载所有组件.

在 vue.js 应用程序中将静态内容(例如国家代码)存储在哪里

推荐答案

Vue.js相关问答推荐

Vuetify从同一方向旋转传送带下一个项目和上一个项目

在 Vuejs 中更新 Chartjs 图表数据集

vue3 输入标签给出错误 Vue.use 不是函数

绑定事件在渲染函数中不起作用

何时将代码拆分为 Nuxt 中的组件？

路径别名在 vue 脚本块中不起作用

nuxt.js - 预加载 .woff 字体加载为@font-face

在 vuejs 中显示两个组件，但只显示一个，为什么？

在 VueJS 中存储图像的正确位置是什么 - 公共文件夹或assets文件夹？

如何将 vue.js 与 gulp 一起使用？

如何为 Vue 项目设置 lint-staged？

使用 vue-property-decorator 时注册本地组件

为 webpack HMR Vue.js 包含来自外部项目文件夹的可导入模块

如何将项目推送到 Vuejs 中数据对象的数组中？ Vue 似乎没有关注 .push() 方法

如何在 Vue3 设置标签中定义组件名称？

使用 nuxt，如何将路由名称放在页面标题中？

如何将事件绑定到 Vuetify 中的树视图 node ？

在 vue.js 组件中react this.props.children

Vuetify RTL 风格

如何在 vue 组件中使用 vuex？