Nuxt, VueJS 这必须在设置函数中调用答案

【问题标题】：Nuxt, VueJS This must be called within a setup functionNuxt, VueJS 这必须在设置函数中调用
【发布时间】：2021-06-05 19:55:41
【问题描述】：

我有一个项目。它目前在某个网站上可用。我需要进行一些更改。当我从 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>

【问题讨论】：

错误提示您在使用@vue/composition-api 和@nuxtjs/composition-api 之外。你只需要后者，你不需要用那个模块调用Vue.use(VueCompositionAPI)。
不幸的是，它没有帮助。我从 composition-api.js 中删除了 Vue.use(VueCompositionAPI) 并没有帮助。也许还有另一种方式来启动它？我只需要更改 scss 文件。
没有足够的上下文来确定问题。你能分享一个复制的链接吗？

标签： vue.js nuxt.js

【解决方案1】：

从表面上看，似乎是你

当 VueCompositionAPI 已安装时，您为它创建了另一个插件，例如 @nuxtjs/composition-api

我建议您从项目中删除任何其他组合 API，并坚持使用最新版本的官方 @nuxtjs/composition-api 和 Vuex v4 用于 Nuxt 2

在@nuxtjs/composition-api的最新版本中，你可以使用

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

注意：您必须直接在 setup() 函数内而不是在您的方法内定义像 const router = useStore() 这样的辅助函数，以避免出现 This must be called within a setup function 错误。

对于那些想使用route的人

为了顺利升级到 Nuxt 3，建议不要从useContext 访问route、query、from 和params而是使用useRoute 辅助函数。

【讨论】：

【解决方案2】：

我不知道那里发生了什么。我删除了该存储库并再次克隆它。接下来我这样做了： npm init 进而 npm run dev 它有效。

【讨论】：