9

考虑以下组合函数：

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,
  }
}

现在，当我想在Vue中使用isAuthenticated计算属性时，会抛出错误“未捕获的错误：[vue-composition-api] must call Vue.use(plugin) before using any function。 ”：/router/index.js

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 启动文件实例化：

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

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

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

根据这个示例，这是一个使用相同组合 API 的库，它应该在对象isAuthenticated内实例化时工作Router。有更多的人为此而苦苦挣扎，但我似乎无法做到这一点。

4

3 回答 3

25

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

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

在Vue.use(CompositionApi)尝试使用任何属于@vue/composition-api.

在您的main.jsorindex.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 {
// ...
}

这将起作用。

于 2020-05-20T07:38:11.850 回答
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);
于 2020-05-19T08:31:23.623 回答
0

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

于 2021-12-09T16:10:47.193 回答