在 Nuxt 应用程序中集成 Google Optimize

Question

我正在尝试在我的 Nuxt 应用程序中使用 Google Optimize。我需要一种在任何页面组件更新后触发激活事件的方法。当前的问题是 API 可能会返回数据，并使用 API 数据在页面加载时重新渲染 DOM。之后我需要触发激活事件。用于在 SPA 中触发激活事件的 google 文档如下在单页应用程序中 触发激活

对于 angular 应用程序，它是通过添加来完成的

myapp.run(function($rootScope, $timeout) {
   $rootScope.$watch(function(){
     $timeout(function(){
       dataLayer.push({'event': 'optimize.activate'});
     },0,false);
   })
})

我正在 Nuxt 应用程序中寻找类似的替代方案

我知道在组件内部，我可以updated在内容更新和 DOM 重新渲染后监听生命周期钩子。但是，当任何组件更新或 DOM 重新呈现时，我需要一种在中央位置执行某些代码的方法。

我使用的是我在目录中创建了一个全局 mixin ( globalMixin.js)plugins并使用了它的updated生命周期方法。因此，此混合代码被注入到每个组件中，并且如果这些组件数据中的任何一个发生更改，则更新方法将被调用。但我怀疑这种方法是否是理想的解决方案。

任何人都可以向我建议一种更好的方法来完成这项任务，或者 Nuxt/Vue 是否有任何标准的方法来做到这一点？里面的代码plugins/globalMixin.js如下：

if (!Vue.__my_mixin__) {
      Vue.__my_mixin__ = true
      Vue.mixin({
        updated() {
        ..execute some code
       }
     }) 
    } 

Answer 1

您应该使用Vuex等存储来处理应用程序的本地状态。

然后，您可以在任何页面或组件中检索商店的状态。我建议使用vuex-map-fields