javascript - 本地函数在 Vue 中不起作用使用 useWebWorkerFn

Question

useWebWorkerFn 我正在尝试使用以下是我执行相同操作的代码来过滤对象数组

import { useWebWorkerFn } from '@vueuse/core'
import { doLowerCase } from './filtering.js'

async function asyncDataSearch(data,searchWords) {

  const { workerFn } = useWebWorkerFn(dataSearch, {
    dependencies: [
      'https://cdn.jsdelivr.net/npm/lodash-es@4.17.21/every.js',
      'https://cdn.jsdelivr.net/npm/lodash-es@4.17.21/includes.js'
    ],
  })
  const filteredData = await workerFn(data, searchWords)
  return filteredData
}

async function dataSearch(data, searchWords) {

  return data.filter((e) => {
    let isTrueName = true;
    if (searchWords.length > 0) {
      const myBigStr = doLowerCase(
      .trim(
      `${e.fname}${e.lname} ${e.cname}`
      );

      isTrueName = _.every(searchWords, (el) => _.includes(myBigStr, el));
    }

    return isTrueName;

  });

}

下面是filtering.js文件中的 doLowerCase 函数。

export function doLowerCase(myText = "") {
  if (myText) {
    return myText.toLowerCase();
  } else {
    return "";
  }
}

现在的问题是当我添加 lodash.min.js cdn url 时 lodash 函数可以工作，但是当我尝试添加每个函数的依赖项时，我不想导入整个 lodash 包，如此处所述。它显示无法导入脚本的错误。同样在上面的代码doLowerCase中是另一个文件中存在的函数，该函数无法正常工作，因为它无法访问，如何按预期导入和使用该函数。有关更多信息，请访问VueUse

标签： javascriptvue.jsweb-worker