时间戳

首页 > 解决方案 > 如何从 vuex 商店将参数传递给 vue 中的 IIFE？

javascript - 如何从 vuex 商店将参数传递给 vue 中的 IIFE？

问题描述

我们有两个脚本在启动时加载到 head 标签中。其中一个脚本指向本地 .js 文件中的 IIFE。这是第三方软件。

/*
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)

我想要做的是从 Vuex 存储中传递一些状态对象属性作为“customVariables”对象中的值。

例如：我想使用 from store/modules/user.js

state = {
  flow.NEW_USER
}

并在 customVariables 对象中

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

标签： javascriptvue.jsvuex

解决方案

检查state变量是否在所有相邻.js文件中全局可用。如果是这样，您可以修改IIFE以注入第三个参数，这将是您的state变量。

我认为你的state变量对象符号应该是这样的。

state = {
  flow: flow.NEW_USER
}

给IIFE第三个参数称为s（或任何你喜欢的）。

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

state并在底部 注入变量。

现在，这仅在您对state变量具有全局访问权限时才有效。它必须在IIFE执行之前定义。

推荐阅读