在 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相关问答推荐

使用插槽的VUE 3工作台

为什么元素会从Vue 3中的TransitionGroup左上角出现？

在 Nuxt3 中使用 Vue3 vue-ganntastic 插件

如何解决 importers[path] is not a function for clean Vue 3/Vite/Storybook installation

纵横比元素溢出容器

Axios Intercept 在第一次调用时未从 localStorage 应用令牌

查看 cli3 启用 CORS

Vuetify 容器不会填充高度

如何在 Vue.js 中传递 $router.push 中的数据？

如何使用 vuejs 从 SPA 访问 /storage -laravel- 中的图像

Nuxt 打开链接到模态

异步方法不等待函数

如何使用 JavaScript 按索引删除数组元素？

在路由更改之前显示确认对话框

从 ajax 调用填充 Vue.js 中的下拉列表

如何在 Vuetify DataTable 组件中设置初始每页行数值？

在 Chrome DevTools 中实时更改时 destruct 了 Vue.js 应用程序(Webpack 模板)的页面样式

Vue组件如何命名

在~/components/AddPlaceModal.vue中找不到导出AddPlaceModal

Apollo 客户端在向服务器发送Mutations 时返回400(错误请求)错误