Vue从组件中的服务文件获取变量，但应保持其自身状态

x33g5p2x 于 2023-01-17 发布在 Vue.js

关注(0)|答案(1)|浏览(143)

我有两个组件组件A和组件B以及一个包含所有常量constants.js的服务文件

constants.js文件具有一个变量VMWARE_CONFIG

VMWARE_CONFIG: [
    {
      name: "Production",
      selected: false,
      year: "1yr",
    },
    {
      name: "Development",
      selected: false,
      year: "1yr",
    }
 ]

此变量将导入组件A和组件B，并用作进一步数据处理的过滤器

data() {
    return {
      priceList: null,
      search: null,
      mappedInstancesheader: Constants.MappedServerInstancesHeaders,
      unMappedServersheader: Constants.UnMappedServerInstancesHeaders,
      computeDetailsData: null,
      aws_migration_config: "all",
      slider: { label: "color", val: 25, color: "orange darken-3" },
      vmware_config: Constants.VMWARE_CONFIG,
      items: [],
    }
  }

相同的代码用于不同的组件
我面临的问题是，如果用户更改组件A上的过滤器，它也会反映在组件B上，我希望为每个组件的变量维护不同的状态。
我可以做一件事，即在每个组件本身中定义变量，但实际上，此数组对象有超过15个对象，并在超过3个组件中使用，还有6个其他变量具有类似的使用情形

vue.js

来源：https://stackoverflow.com/questions/75124332/vue-fetch-variable-from-service-file-in-components-but-should-maintain-its-own-s

1条答案

按热度按时间

gblwokeq1#

可以使用“扩散”操作符，例如：

data() {
return {
  priceList: null,
  search: null,
  mappedInstancesheader: Constants.MappedServerInstancesHeaders,
  unMappedServersheader: Constants.UnMappedServerInstancesHeaders,
  computeDetailsData: null,
  aws_migration_config: "all",
  slider: { label: "color", val: 25, color: "orange darken-3" },
  vmware_config: [...Constants.VMWARE_CONFIG]
  items: [],
  }
}

For more information, click here
问题是：
导入或使用数组时，将引用其在内存中的位置。
因此，当您使用和更改数组时，您更改的是存储在内存中的数组，因此无论在何处使用它，它都会更改，因为它是同一个数组。
解决办法是：
复制内存中的数组，即创建另一个数组
ES6执行此操作的最简单方法是Spread运算符。
但是您也可以使用lodash cloneDeep之类的库

赞(0）回复(0）举报 2023-01-17

我来回答

Vue从组件中的服务文件获取变量，但应保持其自身状态

1条答案

相关问题

热门标签

最新问答