在 InertiaJS + Vue 事件处理程序中使用 lodash 时出错

Question

我有一个

Vue + inertiajs

(

Laravel

) 项目，我想在其中一个 Vue 单文件组件中使用

._pull

的

lodash

函数。

bootstrap.js

中的默认配置：

import _ from 'lodash';
window._ = _;
...

在

app.js

：

import './bootstrap';

import { createApp, h } from 'vue';
...

当我直接在 _.pull

 内部调用 

<script setup>

 时，它可以工作。

但是，当我在事件处理程序中使用它时，例如在普通按钮内：

<button @click="_.pull(array, 'a', 'c')">My button</button> 然后，控制台记录以下错误：

Uncaught TypeError: _ctx._.pull is not a function
at onClick (MyComponent.vue:243:114)
...

有什么想法吗？ 预先感谢。

Answer 1

您需要将其添加到 mixin 中。试试这个方法。

import _ from 'lodash';
window._ = _;

createApp({render: () => h(app, props)})
    .use(plugin)
    .mixin(require('@/Mixins/modules'))
    .mount(el)

.mixin(require('@/Mixins/modules')) 在 app.js 文件和 Mixins/modules 中此代码

module.exports = {
methods: {
    _: () => _,
    route,
  },
};

某种方式使用 Ziggy 路线

Answer 2

Laravel11 +惯性终于起作用了我改变了.mount的位置并将CreateApp添加为const：

import _ from 'lodash';
......
createInertiaApp({
    title: (title) => `${title} - ${appName}`,
    resolve: (name) => resolvePageComponent(`./Pages/${name}.vue`, import.meta.glob('./Pages/**/*.vue')),
    setup({ el, App, props, plugin }) {
        const app = createApp({ render: () => h(App, props) })
            .use(plugin)
            .use(ZiggyVue)
            .use(i18nVue, {
                resolve: async lang => {
                    const langs = import.meta.glob('../../lang/*.json');
                    return await langs[`../../lang/${lang}.json`]();
                }
            });

        app.config.globalProperties.$_ = _;
        app.mount(el);
    },
    progress: {
        color: '#4B5563',
    },
});

然后我们就可以使用

$_.pull()

等功能了