Vue.js应用中静态内容（如国家代码）的存储最佳实践咨询

嘿，这个问题问得特别接地气！我平时做Vue项目时也经常遇到这类需求，就来分享下最常用的几种方案和各自的适用场景吧～

优先选择：独立的JS模块（最推荐） #

对于像国家代码列表、分类数组这种完全不可变、不会被用户或应用修改的静态数据，最直接高效的方式就是创建单独的JS文件，把数据导出成常量，需要的时候直接导入使用。这种方式既符合Vue的模块化理念，又轻量易维护，完全没必要动用状态管理工具。

比如咱们可以创建一个src/constants/countries.js文件：

// src/constants/countries.js
export const COUNTRIES = {
  'AF': 'Afghanistan',
  'AX': 'Åland Islands',
  'AL': 'Albania',
  'DZ': 'Algeria',
  'AS': 'American Samoa',
  'AD': 'Andorra',
  'AO': 'Angola',
  // ... 其他国家数据
}

然后在需要的组件里直接导入使用：

<template>
  <select v-model="selectedCountry">
    <option v-for="(countryName, code) in COUNTRIES" :key="code" :value="code">
      {{ countryName }}
    </option>
  </select>
</template>

<script>
import { COUNTRIES } from '@/constants/countries.js'

export default {
  data() {
    return {
      selectedCountry: '',
      COUNTRIES
    }
  }
}
</script>

如果这个数据需要在很多组件里复用，也可以把它挂到Vue原型上，全局可用：

// main.js
import Vue from 'vue'
import { COUNTRIES } from '@/constants/countries.js'

Vue.prototype.$countries = COUNTRIES

之后在任意组件里就能直接通过this.$countries访问到这个列表了。

什么时候考虑用Vuex？ #

Vuex是用来管理全局可变化状态的，比如用户的登录状态、购物车数据这类会动态改变的内容。如果你的静态数据只是单纯的展示用，完全不需要修改，那把它放到Vuex里纯粹是增加复杂度，没必要。

但如果这个静态列表需要和其他全局状态联动（比如用户选择了某个国家后，需要在多个组件同步这个选择状态），那可以把静态列表放在Vuex的state里，同时维护一个selectedCountry的状态：

// store/modules/countries.js
import { COUNTRIES } from '@/constants/countries.js'

const state = {
  list: COUNTRIES,
  selected: ''
}

const mutations = {
  SET_SELECTED_COUNTRY(state, code) {
    state.selected = code
  }
}

export default {
  namespaced: true,
  state,
  mutations
}

这种场景下用Vuex才是合理的。

为什么不能放.env文件里？ #

.env文件是用来存储环境相关的配置变量的，比如API地址、密钥、环境标识（开发/生产）这类不同环境下可能变化的内容。静态数据和环境无关，而且通常体积较大，放到.env里完全不符合它的设计初衷，还会导致配置文件臃肿难维护。

对比AngularJS的HelperService #

你之前在AngularJS里用HelperService的思路其实和Vue里的独立模块异曲同工，都是把静态数据/工具逻辑封装起来，需要时调用。只不过Vue的模块化方案更直接，不需要通过服务的方式来包裹，代码更简洁。

总结一下：这类静态不可变数据，优先用独立JS模块导出，简单高效；只有当需要和全局状态联动时再考虑Vuex；绝对不要放到.env文件里。

内容的提问来源于stack exchange，提问作者axelwittmann