简体   繁体   中英

How do I pass arguments to an IIFE in vue from vuex store?

We have two scripts that are loaded into the head tag upon launch. One of these scripts points to an IIFE in a local .js file. This is third party software.

/*
Inline configuration
*********************
Object is now being instantiated against the OOo object (1 global class)
To call this object, place the below in the click event
OOo.oo_launch(event, 'oo_feedback1')
*/
(function (w, o) {
  'use strict'

  var OpinionLabInit = function () {
    // for SPA deployment, o.inlineFeedShow would be the function we tell clients to add to the onclick event of their inline link
    o.inlineFeedbackShow = function (event) {
      var replacePattern = '://' + window.location.host
      if (window.location.host !== 'src.companyX.com' && window.location.host !== 'checkout.companyX.com') {
        replacePattern = '://test.checkout.companyX.com'
      }
      o.oo_feedback = new o.Ocode({
        referrerRewrite: {
          searchPattern: /:\/\/[^/]*/,
          replacePattern: replacePattern
        },
        customVariables: {
          flow: '',
          clientId: '',
          srcCorrelationId: '',
          visitorId: '',
          sAccount: ''
        }
      })

      // Now that oo_feedback has been re-initialized with the custom variable and contextual of the current page, launch the comment card
      o.oo_launch(event, 'oo_feedback')
    }
    o.oo_launch = function (e, feedback) {
      var evt = e || window.event
      o[feedback].show(evt)
    }
    if (typeof OOo !== 'undefined' && typeof OOo.releaseDetails !== 'object') {
      OOo.releaseDetails = []
    }
    OOo.releaseDetails.push({
      author: 'DN',
      timeStamp: '07/26/2019, 10:56:32',
      fileName: 'oo_conf_inline.js',
      fileVersion: '1.0',
      ticketNumber: 'DYN-1042506',
      gitDiff: 'N/A'
    })
  };

  OpinionLabInit()

})(window, OOo)

What I want to do is pass a few state object properties from the Vuex store to be the values in the 'customVariables' object.

For example: I want to use from store/modules/user.js

state = {
  flow.NEW_USER
}

and have in the customVariables object

customVariables: {
          flow: flow.NEW_USER,
          clientId: '',
          srcCorrelationId: '',
          visitorId: '',
          sAccount: ''
        }

Check if the state variable is globally available in all adjacent .js files. If so you could modify the IIFE to inject a third argument, which would be your state variable.

I think that your object notation of the state variable should be like this.

state = {
  flow: flow.NEW_USER
}

Give the IIFE a third parameter called s (or whatever you prefer).

(function (w, o, s) {
  'use strict'

      ...

      o.oo_feedback = new o.Ocode({
        referrerRewrite: {
          searchPattern: /:\/\/[^/]*/,
          replacePattern: replacePattern
        },
        customVariables: {
          flow: s.flow, // flow.NEW_USER is now here
          clientId: '',
          srcCorrelationId: '',
          visitorId: '',
          sAccount: ''
        }
      })

     ...

})(window, OOo, state)

And inject the state variable here at the bottom.

Now this only works if you have global access to your state variable. And it has to be defined before the IIFE is executed.

The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.

 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM