Nuxt 2中watch回调内调用useContext()报错，求解决方案

使用Nuxt 2搭配版本为0.33.1的@nuxtjs/composition-api，组件代码如下：

import { defineComponent, useContext, useRoute, watch } from '@nuxtjs/composition-api';

export default defineComponent({
  setup () {
    const route = useRoute();

    // Other code...

    watch(() => route.value.query, () => {
      const { $axios } = useContext();
    });

    // Other code...
  }
});

尝试监听route.value.query变化并执行操作时，调用useContext()出现如下错误：

Error: This must be called within a setup function.
    at useContext (index.mjs?9a99:220:1)
    at eval (search.vue?9447:34:1)
    at invokeWithErrorHandling (vue.common.dev.js?4650:3634:1)
    at call (vue.common.dev.js?4650:3271:1)
    at watcher.run (vue.common.dev.js?4650:3375:1)
    at flushSchedulerQueue (vue.common.dev.js?4650:3140:1)
    at Array.eval (vue.common.dev.js?4650:3760:1)
    at flushCallbacks (vue.common.dev.js?4650:3682:1)

请问能否在watch回调内调用useContext()？该如何解决这个问题？

不能在watch回调里调用useContext()。Composition API的这类钩子函数（包括useContext、useRoute等）必须在setup函数的同步执行阶段调用，而watch的回调是在响应式数据变化时异步触发的，此时已经不在setup的同步执行上下文里，所以会抛出错误。

正确的做法是在setup函数的最外层提前获取useContext的结果，之后在watch回调中直接复用这个变量：

import { defineComponent, useContext, useRoute, watch } from '@nuxtjs/composition-api';

export default defineComponent({
  setup () {
    const route = useRoute();
    // 提前在setup同步阶段获取context及所需实例
    const { $axios } = useContext();

    // Other code...

    watch(() => route.value.query, () => {
      // 直接使用提前获取的$axios执行操作
      // 示例：$axios.get('/api/data', { params: route.value.query })
    });

    // Other code...
  }
});

如果只需要context中的特定实例（比如这里的$axios），单独解构出来即可，无需每次都操作整个context对象。

内容的提问来源于stack exchange，提问作者Triet Doan