Как создавать повторно используемые объекты в vuejs

Question

Я создал объект

var params = {
  kpiType: "numeric",
  fetchDataFor: "line",
  dataFilter: [
    {
      kpiGroupId: "5a41fd655bca800604b146cc",
      kpiId: "",
      elementId: "Adult",
      label: "HOURLY",
      color: "#7F186E",
      showOnAxis: "y1",
      mapped: [
        {
          mappedFullSite: 1,
          siteId: "full"
        }
      ]
    }
  ],
  from: "",
  to: "",
  timeFrame: "daily",
  consolidateSiteData: 1,
  consolidateData: 1,
  localTimezone: "+04:00"
};

Моя цель - мне нужно повторно использовать этот объект с разными датами и kpiId.

В настоящий момент у меня выбрано несколько дат для нескольких KPI.

Например: для первого метода дата параметра - "2019-08-08 00:00:00"to" 2019-08-15 23:59:00 ", а для 2-го метода дата - от " 2019-08-01 00:00:00 "до" 2019-08-07 23:59: 00 "

И выходные данные для обоих параметров показывают дату последнего обновления, то есть " 2019-08-01 00:00:00 "и" 2019-08-07 23:59:00 "

    //1st Method
    getFootfallSelectedPeriod() {
      var payload = [];
      params.dataFilter[0].kpiId = "5a41fd655bca80kpi14b147cc";
      params.from = "2019-08-08 00:00:00";
      params.to = "2019-08-15 23:59:00";
      // console.log(params);
      payload["params"] = params;
      payload["mutationId"] = "footfallDataSelected";
      console.log(payload);
      this.$store.dispatch("getKpiData", payload);
    },
//  2nd Method
getFootfallPriorPeriod() {
      var payload = [];
      params.dataFilter[0].kpiId = "5a41fd655bca80kpi14b147cc";
      params.from = "2019-08-01 00:00:00";
      params.to = "2019-08-07 23:59:00";
      // console.log(params);
      payload["params"] = params;
      payload["mutationId"] = "footfallDataPriorPeriod";
      console.log(payload);
      this.$store.dispatch("getKpiData", payload);
    }

В настоящее время, когда я вызываю этот объект из класса метода, он показывает последние обновленные даты и kpiId

Answer 1

1. Вы можете использовать заводскую функцию .. Что-то вроде:

const params = () => ({
  kpiType: "numeric",
  fetchDataFor: "line",
  dataFilter: [
    {
      kpiGroupId: "5a41fd655bca800604b146cc",
      kpiId: "",
      elementId: "Adult",
      label: "HOURLY",
      color: "#7F186E",
      showOnAxis: "y1",
      mapped: [
        {
          mappedFullSite: 1,
          siteId: "full"
        }
      ]
    }
  ],
  from: "",
  to: "",
  timeFrame: "daily",
  consolidateSiteData: 1,
  consolidateData: 1,
  localTimezone: "+04:00"
})

И затем вы используете это как:

getFootfallSelectedPeriod() {
   var payload = []
   var par = params()
   par.dataFilter[0].kpiId = "5a41fd655bca80kpi14b147cc"
   par.from = "2019-08-08 00:00:00"
   par.to = "2019-08-15 23:59:00"

   payload["params"] = par
   payload["mutationId"] = "footfallDataSelected"
   console.log(payload)
   this.$store.dispatch("getKpiData", payload)
}

2. Или, что еще лучше, , у вас все еще есть var (или, вероятно, лучше const), а затем используется расширение объекта что-то вроде:

const params = {...}

getFootfallSelectedPeriod() {
   var payload = []
   payload["params"] = {
     ...params, 
     kpiId: "5a41fd655bca80kpi14b147cc",
     from: "2019-08-08 00:00:00"
     to: "2019-08-15 23:59:00"
   }
   payload["mutationId"] = "footfallDataSelected"
   console.log(payload)
   this.$store.dispatch("getKpiData", payload)
}