无法访问已安装的 Nuxt (Vue) 中的窗口对象属性答案

【问题标题】：Can't access window object property in Nuxt (Vue) mounted无法访问已安装的 Nuxt (Vue) 中的窗口对象属性
【发布时间】：2020-04-09 21:41:00
【问题描述】：

我有一个 TronLink chrome 扩展，这个扩展提供了一个window.tronWeb 属性，我想在文档加载后访问这个属性。我正在尝试在我的 Nuxt 页面组件的 mounted() 部分执行此操作：

// ...
mounted() {
  this.tronWeb = window.tronWeb;
},
// ...

但我收到undefined。

我已经通过超时解决了这个问题：

// ...
mounted() {
  let _this = this;

  let attempts = 0;
  setTimeout(function startGame() {
    if (window.tronWeb) {
      _this.tronWeb = window.tronWeb;
    } else {
      attempts++;
      if (attempts >= 5) {
        console.log(error);
      } else {
        setTimeout(startGame, 500);
      }
    }
  }, 0);
},
// ...

但看起来这是一个非常奇怪的解决方案。为什么我不能直接在mounted() 部分访问此属性？

【问题讨论】：

如果此扩展正在执行并将此变量延迟添加到窗口，那么超时对我来说似乎是合适的解决方案。我只是检查 nextTick 是否会有所作为。
也许扩展在mounted函数之后执行它的代码。

标签： vue.js nuxt.js tron tronweb tronlink

【解决方案1】：

试试这个：

if (process.browser) {
  console.log('The window object:', window)
}

【讨论】：

【解决方案2】：

您可以参考： nuxt docs > ssr section > window is not defined

因为这段代码是在服务端渲染的，所以不能访问window对象。

您可以使用process.client 仅在客户端检查和运行代码

if (process.client){
   console.log('do sth')
}

【讨论】：