How to create reusable objects in vuejs

Question

I have created an object

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"
};

My goal is , I need to reuse this object with different dates and kpiId.

Right now, I have multiple dates selected for multiple KPI's.

For example: for the 1st method the param date is from "2019-08-08 00:00:00" to "2019-08-15 23:59:00" and for the 2nd method date is from "2019-08-01 00:00:00" to "2019-08-07 23:59:00"

And the output for both param shows the last updated date ie "2019-08-01 00:00:00" and "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);
    }

Currently, When I am calling this object from the method class, it shows the last updated dates and kpiId

`params` points to the same object, you would need to [clone](https://stackoverflow.com/questions/122102/what-is-the-most-efficient-way-to-deep-clone-an-object-in-javascript) it first. — str, Oct 15 '19 at 10:44

score 0 · Answer 1 · answered Oct 15 '19 at 11:29

1. You could use a factory function.. Something like:

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"
})

And then you use it like:

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. Or even better you still have it as a var (or probably would be better a const) and then use object spreading something like:

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)
}

How to create reusable objects in vuejs

1 Answers1