Nuxt：n2 不是函数

Question

我正在使用 Nuxt 3，但有一个像这样的 TypeError :

Uncaught TypeError: n2 is not a function

我有一个按钮使用@click.prevent 调用我的函数toggleSelectRow

这是函数：

const toggleSelectRow = (keyword) => {
    if (keywordsSelected.value.find((kw) => kw.uid_kw === keyword.uid_kw) && props.keywords.length > 1) {
        keywordsSelected.value = []
        nuxtApp.$bus.$emit('filter-from-list', '');
    } else {
        keywordsSelected.value = [keyword]
        nuxtApp.$bus.$emit('filter-from-list', keyword.uid_kw);
  }
}

这是接收器部分：

$bus.$on('filter-from-list', (newKeyword) => {   filters.keyword = (props.keywords.find((kw) => kw.uid_kw === newKeyword)) ? newKeyword : null   if (!filters.keyword) {
    refreshNuxtData('average-keyword-position');
    return;   }

  fetchKeywordPosition({ keyword: newKeyword }); });

nuxtApp 的定义如下：

const nuxtApp = useNuxtApp();

我认为我的问题来自于发出，但我不知道为什么，因为如果我刷新页面，它就会起作用。

修复测试1

我尝试在接收器组件中使用声明的函数，如下所示：

function filterFromList(newKeyword){
  filters.keyword = (props.keywords.find((kw) => kw.uid_kw === newKeyword)) ? newKeyword : null
  if (!filters.keyword) {
    refreshNuxtData('average-keyword-position');
    return;
  }

  fetchKeywordPosition({ keyword: newKeyword });
}

这样称呼它：

$bus.$on('filter-from-list', filterFromList);

但我仍然有同样的错误，所以我认为问题一定来自发送者/接收者。

Answer 1

可能是范围问题。

尝试在发射器中手动绑定

this

$bus.$on('filter-from-list', filterFromList.bind(this));

---

但是，nuxt3 有更好的方法来处理全局事件：Lifecycle Hooks。

您可以定制一个挂钩

// in senders
// before
nuxtApp.$bus.$emit('filter-from-list', '');
// after
nuxtApp.callHook('filter-from-list', '');

// in receivers
// before
nuxtApp.$bus.$on('filter-from-list', (newKeyword) => {});
// after
nuxtApp.hook('filter-from-list', (newKeyword) => {});

最后，扩展

#app

的类型

declare module '#app' {
    interface RuntimeNuxtHooks {
        'filter-from-list': (string) => HookResult;
    }
}