Nuxt、VueJS 这必须在设置函数中调用

Question

我有一个项目。目前可以在某个网站上找到。我需要实施一些改变。当我从 gitlab 下载项目并运行时，它会抛出一个错误：这必须在设置函数中调用。

路径：.nuxt/composition-api/index.js

const useContext = () => {
  const vm = CompositionApi.getCurrentInstance();
  if (!vm)
    throw new Error("This must be called within a setup function.");
  return {
    ...(vm[globalNuxt] || vm.$options).context,
    route: CompositionApi.computed(() => vm.$route),
    query: CompositionApi.computed(() => vm.$route.query),

出了什么问题？

我需要运行该项目来进行一些更改，但无法将其部署到我的本地服务器上。

更新： useContex 在 default.vue 中

...
setup (_, { isServer, refs }: any) {
    // console.info(context)
    // const refs = context.refs
    const { store } = useContext()
    const { scrolllock } = scrollLock(store)
    const locationName = computed(() => store.getters.locationName)
    const location = computed({
      set (val: boolean) {
        store.dispatch('setLocationModal', val)
      },
      get () {
        return store.getters.locationModal
      }
    })
...

当我尝试访问该网站时

cmd 输出

[Vue warn]: [vue-composition-api] already installed. Vue.use(VueCompositionAPI) should be called only once.


 ERROR  [Vue warn]: Error in data(): "Error: This must be called within a setup function."                    22:50:04

found in

---> <Layouts/default.vue> at layouts/default.vue
       <Root>


 ERROR  [Vue warn]: Error in data(): "Error: This must be called within a setup function."                    22:50:05

found in

---> <Layouts/default.vue> at layouts/default.vue
       <Root>


 ERROR  [Vue warn]: Error in data(): "Error: This must be called within a setup function."                    22:50:24

found in

---> <Layouts/default.vue> at layouts/default.vue
       <Root>

Answer 1

根据我的经验，npm无法安装

@nuxtjs/composition-api

旧版本，或类似的东西，所以我确实卸载了旧版本并安装了新版本，它工作了

这就是我所做的

rm -rf node_modules && rm -rf package-lock.json && npm uninstall @nuxtjs/composition-api && npm i @nuxtjs/composition-api && npm i

Answer 2

从外表来看，好像是你

• 当 VueCompositionAPI 已安装时，您为它创建了另一个插件，例如

  @nuxtjs/composition-api

我建议您从项目中删除任何其他组合 API，并坚持使用最新版本的官方

@nuxtjs/composition-api

以及 Nuxt 2 的

Vuex v4

在最新版本的

@nuxtjs/composition-api

中，您可以使用

const store = useStore();
// OR
const { store } = useContext();

注意：您必须直接在

const router = useStore()

函数内而不是在方法内定义

setup()

等辅助函数，以避免

This must be called within a setup function

错误。

想要使用的人

route

为了顺利升级到 Nuxt 3，建议不要从

route

访问

query

、

from

、

params

和

useContext

，而是使用

useRoute

辅助功能。

Answer 3

就我而言，我在将 mixin 文件转换为可组合函数时遇到了此错误。当我在函数内部使用

useContext

而不是在函数外时，它得到了修复。

而不是这个

import { useContext } from '@nuxtjs/composition-api'
const { $device } = useContext()

export const usePreload = () => {
... // rest of the code
}

改成这样

import { useContext } from '@nuxtjs/composition-api'

export const usePreload = () => {

... // rest of the code
}

Answer 4

我不知道那里发生了什么。我删除了该存储库并再次克隆它。 接下来我这样做了：

npm init

进而

npm run dev

而且它有效。