web-dev-qa-db-ja.com

キャッチされていないエラー：[vue-composition-api]は、関数を使用する前にVue.use（plugin）を呼び出す必要があります

次の合成関数について考えてみます。

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 Vue内でisAuthenticated計算プロパティを使用したい場合、エラーをスローします "キャッチされないエラー：[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ブートファイル によってインスタンス化されます。

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

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

コンポーネントの外部でエクスポートされた計算済みプロパティを使用する方法はありますか？

同じ構成APIを使用するライブラリである この例 によると、isAuthenticatedがRouterオブジェクト内でインスタンス化されている場合に機能するはずです。 より多くの人々 がこれに苦労していますが、私はそれを正しく理解できていないようです。

vue.jsvuejs3vue-composition-api
3
DarkLite1

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);
0
Mohsen