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

Posted 2023-02-23

【中文标题】使用 Nuxt.js 从页面组件的 asyncData() 方法调用 mixin 函数

【英文标题】：Call mixin function from asyncData() method of the page component with Nuxt.js

【发布时间】：2019-08-08 16:17:38

【问题描述】：

我可以用 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()  ... 
  
)

【参考方案1】：

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

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

【参考方案2】：

您可以将mixin注入应用程序，请参阅https://nuxtjs.org/guide/plugins#inject-in-root-amp-context

【参考方案3】：

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

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

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

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

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