Question

我尝试添加第三方代码并在我的Nuxt应用程序中使用它。基本上，我在@/plugins/vendorCode/logFn.js下编写了一个插件，其中包含一个哑函数：

export default ({ store }) => {
    console.log('store is', store)
}

如您所见，我尝试访问存储并稍后执行一些更改。那是我的下一步。但是现在我被困住了。

在Vue组件中，我有一个名为logFn的按钮，这就是我所做的：

<script>
import logFn from '@/plugins/vendorCode/logFn.js'

  export default {
    methods: {
      onClick () {
        logFn()
      }
    }
  }
</script>

到目前为止，一切都很好。页面重新加载后，我可以在控制台中看到带有存储对象的logFn的结果。

第一个问题：为什么现在要打印？我什么都没叫。

然后，我单击按钮并得到一个错误：TypeError: Cannot read property 'store' of undefined。

第二个问题：为什么我以前有关于日志的此错误？

谢谢您的帮助

Answer 1

第一个问题：为什么现在要打印？我什么都没叫。

因为Nuxt为您称呼它。
在实例化根vue.js应用程序之前，Nuxt会调用./plugins文件夹中的每个.js文件。
https://nuxtjs.org/guide/plugins

如果要将logFn.js用作实用程序功能或其他功能，则应将其放在./assets中或创建自己的util文件夹。

第二个问题：为什么我以前有关于日志的此错误？

因为您没有传递必需的参数。
如果是这样写的，原因可能会更容易找到。

您的代码等于：

export default function (context) {
    console.log('store is', context.store)
}

该函数需要一个参数。
当Nuxt调用它时，Nuxt会给它context，因此您可以访问store。

在页面中调用该函数时，没有传递必需的参数，因此发生了错误。

那你该怎么办？

创建~/assets/js/logFn.js。

export default (store) => { // <- not { store }, but store
    console.log('store is', store)
}

在您的page.vue

中这样称呼它

<script>
import logFn from '~/assets/js/logFn.js'

  export default {
    methods: {
      onClick () {
        logFn(this.$store)
      }
    }
  }
</script>

希望它能起作用。

如何在nuxt的插件中访问商店上下文？

1 个答案: