使用 Nuxt.js 从页面组件的 asyncData() 方法调用 mixin 函数

Question

我可以使用 Nuxt.js 从页面组件的 asyncData() 方法调用 mixin 函数吗？

我的代码：

<template>
  ...
</template>
<script>
   import api from "@/plugins/api/api.js"

   ...

   export default {

      ...

      async asyncData(context) {
          ...
          context.apiMethodName()
          ...
      }

      ...
   }

   ...
</script>

api.js

import Vue from 'vue'
import API from '@/assets/js/api'

Vue.mixin({
  methods: {
    apiMethodName() { ... }
  }
})

Answer 1

你不能使用 asyncData 调用 vue 方法，因为在 vue 之前执行的 asyncData 有一个实例。

您可以将方法提取到简单的 js 函数中，并在 asyncData 和您的 vue 方法中调用它，但请记住，在 asyncData 中您将无法访问 vue 实例属性和其他方法

Answer 2

你可以在app中注入mixin，见https://nuxtjs.org/guide/plugins#inject-in-root-amp-context

Answer 3

您需要放弃使用 mixins 并改为注入您的方法。

首先；将您的 mixin 方法替换为

export default ({ app }, inject) => {
  inject('apiMethodName', () => {
    return 'some data!';
  })
}

然后，在asyncData()方法中，像这样调用apiMethodName()函数

async asyncData(context) {
  context.app.$apiMethodName();
})

Answer 4

我看到答案已经很晚了，但这是可能的。

template.vue

<template>
...
</template>
<script>
  import api from "~/mixins/api/api"
  ...

  export default {
    ...

    async asyncData({context}) {
      ...
      // You don't need to use context
      // You have to use "api" like this:
      const collection = await api.methods.apiMethodName()
      ...

      // bear in mind you should return data from this function
      return {
        collection,
        ...
      }
    }
    ...
  }
  ...
</script>

~/mixins/api/api.js

const api = {
  ...
  methods: {
    async apiMethodName() {
      ...
      // better use here try / catch or Promise with then / catch
      const data = await do_something()
      ...

      return data
    }
    ...
  }
  ...
}

export api

使用 stack VueJS + NuxtJS 测试了类似的方法，它正在实时网站上运行 https://elfinforce.com。

Answer 5

您可以像这样访问全局混合方法：

app.router.app.gloablMethod()

就这么简单！

使用 Nuxt.js 从页面组件的 asyncData() 方法调用 mixin 函数

Call mixin function from asyncData() method of the page component with Nuxt.js

vue.js

mixins

nuxt.js

asyncdata