Vue组件引入服务文件变量后如何维护各自独立状态？

你遇到的问题本质是引用类型的浅拷贝导致状态共享：VMWARE_CONFIG是数组（属于引用类型），两个组件直接赋值vmware_config: Constants.VMWARE_CONFIG时，指向的是同一个内存地址的数组对象。所以修改Component A里的selected状态时，Component B的同一份数组也会被同步修改。

以下几种方案既能避免重复定义常量，又能让每个组件维护独立状态：

方案1：组件内深拷贝常量（快速实现） #

在组件的data中对常量做深拷贝，直接生成独立副本：

data() {
  return {
    // ...其他数据
    vmware_config: JSON.parse(JSON.stringify(Constants.VMWARE_CONFIG))
  }
}

• 适用场景：常量数组里的对象都是纯JSON结构（无函数、Date、Symbol等特殊类型），这种方式简单快捷。

方案2：用工厂函数返回新副本（推荐，适配多组件多变量场景） #

在constants.js中将常量改为工厂函数，每次调用都会返回全新的数组对象：

constants.js 修改后： #

export const Constants = {
  // 把VMWARE_CONFIG改为工厂函数
  getVMwareConfig: () => [
    { name: "Production", selected: false, year: "1yr" },
    { name: "Development", selected: false, year: "1yr" },
    // 其他13+个配置对象
  ],
  // 另外6个同类变量也可以用同样方式处理
  getAnotherConfig: () => [/* ... */],
  // 其他常量...
}

组件中使用： #

data() {
  return {
    // ...其他数据
    vmware_config: Constants.getVMwareConfig()
  }
}

• 优势：统一维护常量结构，避免重复代码，所有组件调用函数都能拿到独立的状态副本，适合你有多个同类变量的场景。

方案3：通用深拷贝函数（处理复杂类型） #

如果常量里包含Date、函数等JSON不支持的类型，可以实现一个通用深拷贝函数：

// 可放在utils.js全局使用，或直接写在组件内
function deepClone(obj) {
  if (obj === null || typeof obj !== 'object') return obj;
  // 处理Date类型
  if (obj instanceof Date) return new Date(obj.getTime());
  // 处理数组
  if (obj instanceof Array) return obj.map(item => deepClone(item));
  // 处理普通对象
  const clonedObj = {};
  for (const key in obj) {
    if (obj.hasOwnProperty(key)) {
      clonedObj[key] = deepClone(obj[key]);
    }
  }
  return clonedObj;
}

组件中使用：

data() {
  return {
    // ...其他数据
    vmware_config: deepClone(Constants.VMWARE_CONFIG)
  }
}

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