如何在 nuxtjs 中访问 asyncData 中的自定义 Vue 道具？

Question

I have custom function in my project which used as plugin

import Vue from 'vue'

function copyText(text) {
    var input = document.createElement('input');
    input.setAttribute('value', text);
    document.body.appendChild(input);
    input.select();
    var result = document.execCommand('copy');
    document.body.removeChild(input);
    return result;
}

Vue.prototype.$copyText = (text) => copyText(text);

How I can access to this vue prop inside asyncData ?

Answer 1

Unfortunately you can't access this in asyncData as stated in the docs . However you could try to call the copy method in the mounted hook like this:

export default {
  mounted() {
    this.$copyText("some text");
  }
}

Answer 2

You don't have access to the component instance through this inside asyncData because it is called before initiating the component.

Source: https://nuxtjs.org/api/

Answer 3

You can use inject in a plugin to get it in the asyncData instead the Vue prototype.

For example, in your plugin do this:

export default ({ app }, inject) => {
  inject('copyText', (text) => {
    const input = document.createElement('input')
    input.setAttribute('value', text)
    document.body.appendChild(input)
    input.select()
    const result = document.execCommand('copy')
    document.body.removeChild(input)
    return result
  })
}

and in the asyncData you can get it:

asyncDate({$http, $copyText}) {
  $copyText('text')
}

or in other place:

created() {
  this.$copyText('text')
}