在 Nuxt 应用程序中集成 Google Optimize

Question

我正在尝试在我的 Nuxt 应用程序中使用 Google Optimize。我需要一种在任何页面组件更新后触发激活事件的方法。当前的问题是 API 返回的数据可能会使用 API 数据在页面加载时重新呈现 DOM。之后我需要触发激活事件。下面给出了在 SPA 中触发激活事件的谷歌文档 Firing activation in a single page application

对于angular app，是通过添加来完成的

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

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

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

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

任何人都可以向我建议一种更好的方法来完成这项任务，或者 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