Javascript 访问.js文件中的Nuxt插件

假设我有一个脚本文件，

foo.js

：

function doStuff() {
   // how to access store and other plugins here?
}

export default { doStuff }

---

在不将调用组件作为参数传递的情况下，如何在上述脚本文件中访问

app

或已安装的插件（如

store

，

i18n

）等内容？

有多种方法调用自定义函数，其中

此

是对调用该函数的组件的引用

1）使用

自定义函数可以声明为方法，并通过

this.customMethod

在组件中使用

customHelpers.js

const customHelpers = {
  methods: {
    doStuff () {
      // this will be referenced to component it is executed in
    }
  }
}

import Vue from 'vue'

Vue.prototype.$doStuff = () => { /* stuff happens here */ }

export default {
  ..., // other nuxt options
  plugins: ['~/plugins/customHelpers.js']
}

export default ({ app }, inject) => {
  inject('doStuff', () => { /* stuff happens here */ })
}

export default {
  ..., // other nuxt options
  plugins: ['~/plugins/customHelpers.js']
}

component.vue

// component.vue
import customHelpers from '~/mixins/customHelpers'
export default {
  mixins: [customHelpers],
  mounted () {
    this.doStuff()
  }
}

2。使用

声明自定义插件：

plugins/customHelpers.js

const customHelpers = {
  methods: {
    doStuff () {
      // this will be referenced to component it is executed in
    }
  }
}

import Vue from 'vue'

Vue.prototype.$doStuff = () => { /* stuff happens here */ }

export default {
  ..., // other nuxt options
  plugins: ['~/plugins/customHelpers.js']
}

export default ({ app }, inject) => {
  inject('doStuff', () => { /* stuff happens here */ })
}

export default {
  ..., // other nuxt options
  plugins: ['~/plugins/customHelpers.js']
}

并在

numxt.config.js

const customHelpers = {
  methods: {
    doStuff () {
      // this will be referenced to component it is executed in
    }
  }
}

import Vue from 'vue'

Vue.prototype.$doStuff = () => { /* stuff happens here */ }

export default {
  ..., // other nuxt options
  plugins: ['~/plugins/customHelpers.js']
}

export default ({ app }, inject) => {
  inject('doStuff', () => { /* stuff happens here */ })
}

export default {
  ..., // other nuxt options
  plugins: ['~/plugins/customHelpers.js']
}

这使方法在每个组件中都可用：

export default {
  mounted () {
    this.$doStuff()
  }
}

3）使用

与方法2相同，但在

fetch

、

asyncData

和内部存储模块中也可以访问注入。到

的绑定可能会有所不同，因为上下文并非无处不在

plugins/customHelpers.js

const customHelpers = {
  methods: {
    doStuff () {
      // this will be referenced to component it is executed in
    }
  }
}

import Vue from 'vue'

Vue.prototype.$doStuff = () => { /* stuff happens here */ }

export default {
  ..., // other nuxt options
  plugins: ['~/plugins/customHelpers.js']
}

export default ({ app }, inject) => {
  inject('doStuff', () => { /* stuff happens here */ })
}

export default {
  ..., // other nuxt options
  plugins: ['~/plugins/customHelpers.js']
}

并在
numxt.config.js

const customHelpers = {
  methods: {
    doStuff () {
      // this will be referenced to component it is executed in
    }
  }
}

import Vue from 'vue'

Vue.prototype.$doStuff = () => { /* stuff happens here */ }

export default {
  ..., // other nuxt options
  plugins: ['~/plugins/customHelpers.js']
}

export default ({ app }, inject) => {
  inject('doStuff', () => { /* stuff happens here */ })
}

export default {
  ..., // other nuxt options
  plugins: ['~/plugins/customHelpers.js']
}

用法示例：

export default {
  asyncData ({ app }) {
    app.$doStuff()
  }
}

请参阅以获取更多示例。
请详细说明为什么默认插件格式不适合您<代码>导出默认值（{app，store}）=>{/*插件代码*/}

@aBiscuit，因为脚本文件不是一个插件，应该从哪里调用

doStuff

？组件、仓库或其他地方？这可能有助于确定更好的实现方法。@aBiscuit很抱歉没有弄清楚这一点。主要由组件组成。我希望避免使用

doStuff（this）

，

doStuff.call（this）

等。感谢您的示例。假设我不想定义插件或mixin，只想访问商店或类似的

customHelpers.js

。有可能吗？退后一步。。通常，您想要做的是使用动态绑定上下文的函数。必须有一个上下文的访问点。它可以直接代替调用（例如doStuff.bind（this），或者将函数直接分配给组件的方法，所以Vue为您进行绑定），也可以通过您在-Nuxt.js中开发的环境提供的方法来完成，这些方法在上面列出。我认为在保持逻辑的可维护性和可预测性方面没有更好的选择。