未捕获的错误：[vue-composition-api] 必须在使用任何函数之前调用 Vue.use(plugin)

Posted 2023-02-16

【中文标题】未捕获的错误：[vue-composition-api] 必须在使用任何函数之前调用 Vue.use(plugin)

【英文标题】：Uncaught Error: [vue-composition-api] must call Vue.use(plugin) before using any function

【发布时间】：2020-09-05 04:52:39

【问题描述】：

考虑以下组合函数：

import  computed, ref  from '@vue/composition-api'
import  isInternetExplorer  from 'src/services/utils/utilsService'
import  Screen  from 'quasar'
import  auth, getAllScopes  from 'src/services/auth/authService'

const isLoginPopup = Screen.lt.sm || isInternetExplorer ? false : true
const accountID = ref('')

export const setAccountID = () => 
  const account = auth.getAccount()

  if (account)  accountID.value = account.idTokenClaims.oid  
  else  accountID.value = '' 


export const useAccount = () => 
  const loading = ref(false)
  const disabled = ref(false)

  const login = async () => 
    loading.value = true
    disabled.value = true

    const allScopes = getAllScopes()

    if (isLoginPopup) 
      try 
        await auth.loginPopup(allScopes)
       finally 
        setAccountID()
        disabled.value = false
        loading.value = false
      
     else 
      auth.loginRedirect(allScopes)
    
  

  const logout = () =>  auth.logout() 

  return 
    accountID: computed(() => accountID.value),
    isAuthenticated: computed(() => Boolean(accountID.value)),
    loading: computed(() => loading.value),
    disabled: computed(() => disabled.value),
    login, logout,
  

现在当我想在/router/index.js 中使用isAuthenticated 计算属性时，Vue 会抛出错误“未捕获的错误：[vue-composition-api] 必须在使用前调用 Vue.use(plugin)任何功能。”：

import  route  from 'quasar/wrappers'
import VueRouter from 'vue-router'
import routes from './routes'

import  useAccount  from 'src/comp-functions/useAccount'

export default route(function ( Vue ) 
  Vue.use(VueRouter)

  const Router = new VueRouter(
    scrollBehavior: () => ( x: 0, y: 0 ),
    routes,

    mode: process.env.VUE_ROUTER_MODE,
    base: process.env.VUE_ROUTER_BASE,
  )

  Router.beforeEach((to, from, next) => 
    const  isAuthenticated  = useAccount()

    if (isAuthenticated || to.path === '/' || to.path === '/login') 
      next()
     else 
      next('/login')
    
  )

  return Router
)

组件 API 由文件 '/boot/auth.js' 中的 Quasar Framework boot file 实例化：

import VueCompositionApi from '@vue/composition-api'
import  boot  from 'quasar/wrappers'

export default boot(( Vue ) => 
  Vue.use(VueCompositionApi)
)

有没有办法在组件之外使用导出的计算属性？

根据this example，这是一个使用相同组合API的库，当isAuthenticated在Router对象中被实例化时，它应该可以工作。有more people 在为此苦苦挣扎，但我似乎无法正确处理。

【参考方案1】：

您是否正确安装了VueCompositionApito？

You must install @vue/composition-api via Vue.use() before using other APIs:

import Vue from 'vue';
import VueCompositionApi from '@vue/composition-api';

Vue.use(VueCompositionApi);

【讨论】：

是的，它已正确安装，并且它适用于除组件之外的所有组件。用代码更新了 OP。

【参考方案2】：

这个问题已由 Vue.js 论坛上的一位朋友修复。对于遇到此问题的其他人，我将在此处发布他的答案。简而言之，您需要创建一个单独的文件来安装组合 API 插件，并在 router/index.ts 文件中调用该文件来实例化插件。

这是因为组合 API 不在 Vue 内部。随着 Vue 3 的发布，这将得到解决。

在尝试使用属于@vue/composition-api 的任何东西之前，您需要先Vue.use(CompositionApi)。

在您的main.js 或index.js 应用入口点中，首先安装它：

import Vue from 'vue'
import VueCompositionApi from '@vue/composition-api'

Vue.use(VueCompositionApi)

这行得通。但我假设你的文件看起来不像这样，它看起来更像下一个：

import Vue from 'vue'
import VueCompositionApi from '@vue/composition-api'
import  isAuthenticated  from '@/store/auth'

Vue.use(VueCompositionApi)

这将再次炸毁一切，因为安装组合 API (Vue.use(VueCompositionApi)) 的行位于导入使用它的东西的行之后 (import unauthenticated from '@/store/auth')

与此同时，在 Vue 3.0 发布之前，您可以创建一个简单地安装插件的文件：

// installCompositionApi.js

import Vue from 'vue'
import VueCompositionApi from '@vue/composition-api'

Vue.use(VueCompositionApi)

然后在你的入口点：

// main.js
import './installCompositionApi.js'
import Vue from 'vue'
import  isAuthenticated  from '@/store/auth'

if (isAuthenticated.value) 
// ...
 else 
// ...

这会起作用。

【讨论】：

我有完全相同的错误。我看到你也使用类星体。使用类星体，您可以获得引导文件。当我按照您的说明将安装脚本放在启动文件的顶部时，我没有得到相同的结果。

看看我的存储库。检查boot file 和boot section in quasar.conf.je。

【参考方案3】：

我也有同样的错误，我只是升级了@vue/composition-api的版本。

【讨论】：

您的答案可以通过额外的支持信息得到改进。请edit 添加更多详细信息，例如引用或文档，以便其他人可以确认您的答案是正确的。你可以找到更多关于如何写好答案的信息in the help center。