javascript - Nuxt JS use injected function from plugin in another plugin file - Stack Overflow

admin管理员组

文章数量:1022137

I'm using Nuxt JS's inject function to inject a function into my page for code reusability. I'd like to use the function in another plugin file and can't seem to get the function in there.

Here's my set up:

• plugins/utils/tracking.js

function setCookiePrefix () {
  return 'fudge__'
}

function getCookie (app, name) {
  try {
    const prefix = setCookiePrefix()
    const cookie = app.$cookies.get(`${prefix}${name}`)

    if (!cookie || cookie == '') {
      throw 'cookie not set'
    }

    return cookie
  } catch (err) { }

  return null
}

export default function ({ app, store, context }, inject) {

  /*
  * Get just the affiliate (cpm_id OR affiliate)
  * examples: "my_brand", "blah"
  */
  inject('getAffiliate', () => {
    const affiliate = getCookie(app, 'affiliate')
    const brand = getBrand(store)

    if (!affiliate) return brand

    return affiliate
  })

}

And the file I'm trying to utilise the getAffiliate function in from my tracking.js file:

• plugins/init-brand.js

export default async function ({ app, route, store }) {
  const affiliate = app.$getAffiliate()
  console.log(affiliate) <-- undefined
}

I've tried:

• app.$getAffiliate()
• this.$getAffiliate() <-- this works in a Vue file
• $getAffiliate()
• this.getAffiliate()

What am I missing to access my getAffiliate function in another plugin file?

I'm using Nuxt JS's inject function to inject a function into my page for code reusability. I'd like to use the function in another plugin file and can't seem to get the function in there.

Here's my set up:

• plugins/utils/tracking.js

function setCookiePrefix () {
  return 'fudge__'
}

function getCookie (app, name) {
  try {
    const prefix = setCookiePrefix()
    const cookie = app.$cookies.get(`${prefix}${name}`)

    if (!cookie || cookie == '') {
      throw 'cookie not set'
    }

    return cookie
  } catch (err) { }

  return null
}

export default function ({ app, store, context }, inject) {

  /*
  * Get just the affiliate (cpm_id OR affiliate)
  * examples: "my_brand", "blah"
  */
  inject('getAffiliate', () => {
    const affiliate = getCookie(app, 'affiliate')
    const brand = getBrand(store)

    if (!affiliate) return brand

    return affiliate
  })

}

And the file I'm trying to utilise the getAffiliate function in from my tracking.js file:

• plugins/init-brand.js

export default async function ({ app, route, store }) {
  const affiliate = app.$getAffiliate()
  console.log(affiliate) <-- undefined
}

I've tried:

• app.$getAffiliate()
• this.$getAffiliate() <-- this works in a Vue file
• $getAffiliate()
• this.getAffiliate()

What am I missing to access my getAffiliate function in another plugin file?

• javascript
• vue.js
• nuxt.js

Share Improve this question Follow asked Jan 24, 2022 at 10:54 Ryan HRyan H 3,00566 gold badges5656 silver badges158158 bronze badges 1

• 1 Have you connected the plugins in the configuration in the right order? The plugin with the inject function should be higher in the plugins: [] in nuxt.config.js to be available in the second plugin file – JanuszO Commented Apr 16, 2022 at 8:37

Add a ment  | 

1 Answer 1

Sorted by: Reset to default 3

I have an api plugin with some axios set up. I can load it inside another plugin file like this:

export default ( {$api} , inject) => {
  const service = new SomeService($api)
  inject('someService', SomeService)
}

So in your case that would be:

export default async function ({ app, route, store, $getAffiliate }) {
  const affiliate = $getAffiliate()
  console.log(affiliate)
}

Not sure if this is the right way, but it works for me.

I'm using Nuxt JS's inject function to inject a function into my page for code reusability. I'd like to use the function in another plugin file and can't seem to get the function in there.

Here's my set up:

• plugins/utils/tracking.js

function setCookiePrefix () {
  return 'fudge__'
}

function getCookie (app, name) {
  try {
    const prefix = setCookiePrefix()
    const cookie = app.$cookies.get(`${prefix}${name}`)

    if (!cookie || cookie == '') {
      throw 'cookie not set'
    }

    return cookie
  } catch (err) { }

  return null
}

export default function ({ app, store, context }, inject) {

  /*
  * Get just the affiliate (cpm_id OR affiliate)
  * examples: "my_brand", "blah"
  */
  inject('getAffiliate', () => {
    const affiliate = getCookie(app, 'affiliate')
    const brand = getBrand(store)

    if (!affiliate) return brand

    return affiliate
  })

}

And the file I'm trying to utilise the getAffiliate function in from my tracking.js file:

• plugins/init-brand.js

export default async function ({ app, route, store }) {
  const affiliate = app.$getAffiliate()
  console.log(affiliate) <-- undefined
}

I've tried:

• app.$getAffiliate()
• this.$getAffiliate() <-- this works in a Vue file
• $getAffiliate()
• this.getAffiliate()

What am I missing to access my getAffiliate function in another plugin file?

I'm using Nuxt JS's inject function to inject a function into my page for code reusability. I'd like to use the function in another plugin file and can't seem to get the function in there.

Here's my set up:

• plugins/utils/tracking.js

function setCookiePrefix () {
  return 'fudge__'
}

function getCookie (app, name) {
  try {
    const prefix = setCookiePrefix()
    const cookie = app.$cookies.get(`${prefix}${name}`)

    if (!cookie || cookie == '') {
      throw 'cookie not set'
    }

    return cookie
  } catch (err) { }

  return null
}

export default function ({ app, store, context }, inject) {

  /*
  * Get just the affiliate (cpm_id OR affiliate)
  * examples: "my_brand", "blah"
  */
  inject('getAffiliate', () => {
    const affiliate = getCookie(app, 'affiliate')
    const brand = getBrand(store)

    if (!affiliate) return brand

    return affiliate
  })

}

And the file I'm trying to utilise the getAffiliate function in from my tracking.js file:

• plugins/init-brand.js

export default async function ({ app, route, store }) {
  const affiliate = app.$getAffiliate()
  console.log(affiliate) <-- undefined
}

I've tried:

• app.$getAffiliate()
• this.$getAffiliate() <-- this works in a Vue file
• $getAffiliate()
• this.getAffiliate()

What am I missing to access my getAffiliate function in another plugin file?

• javascript
• vue.js
• nuxt.js

Share Improve this question Follow asked Jan 24, 2022 at 10:54 Ryan HRyan H 3,00566 gold badges5656 silver badges158158 bronze badges 1

• 1 Have you connected the plugins in the configuration in the right order? The plugin with the inject function should be higher in the plugins: [] in nuxt.config.js to be available in the second plugin file – JanuszO Commented Apr 16, 2022 at 8:37

Add a ment  | 

1 Answer 1

Sorted by: Reset to default 3

I have an api plugin with some axios set up. I can load it inside another plugin file like this:

export default ( {$api} , inject) => {
  const service = new SomeService($api)
  inject('someService', SomeService)
}

So in your case that would be:

export default async function ({ app, route, store, $getAffiliate }) {
  const affiliate = $getAffiliate()
  console.log(affiliate)
}

Not sure if this is the right way, but it works for me.

本文标签： javascriptNuxt JS use injected function from plugin in another plugin fileStack Overflow