时间戳

首页 > 解决方案 > 如何在 nuxt 的插件中访问存储上下文？

vue.js - 如何在 nuxt 的插件中访问存储上下文？

问题描述

我尝试添加第三方代码并在我的 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 的结果，以及 store 对象。

第一个问题：为什么现在是打印？我根本没有调用它。

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

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

感谢您的帮助

标签： vue.jsnuxt.js

解决方案

第一个问题：为什么现在是打印？我根本没有调用它。

因为 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>

希望它有效。

推荐阅读