将 Vuex-ORM 添加到 Laravel Nova 工具

Question

谁能帮我将vuex-orm 添加到 Laravel Nova 工具中。

一个 Laravel Nova 工具的基础有 tool.js，其内容如下（'planning-tool' 名称，路径可能因工具名称而异）：

Nova.booting((Vue, router, store) => {
    router.addRoutes([
        {
            name: 'planning-tool',
            path: '/planning-tool',
            component: require('./components/Tool'),
        },
    ])
})

如您所见，Laravel Nova 已经有一家商店。

根据 Vuex-ORM 文档 (https://vuex-orm.org/guide/prologue/getting-started.html#register-models-to-vuex)，我应该开始使用：

import Vue from 'vue'
import Vuex from 'vuex'
import VuexORM from '@vuex-orm/core'
import User from '@/models/User'

Vue.use(Vuex)

// Create a new instance of Database.
const database = new VuexORM.Database()

// Register Models to Database.
database.register(User)

// Create Vuex Store and register database through Vuex ORM.
const store = new Vuex.Store({
  plugins: [VuexORM.install(database)]
})

export default store

由于 Laravel Nova 已经有一个 Vuex 商店，我试图将它混合起来。但只要我添加与@vuex-orm/core 相关的导入，我就会收到以下错误：

ERROR in ./node_modules/@vuex-orm/core/dist/vuex-orm.esm.js
Module parse failed: Unexpected token (1105:21)
You may need an appropriate loader to handle this file type.
|     }
|     if (typeof target === 'object' && target !== {}) {
|         const cp = { ...target };
|         Object.keys(cp).forEach((k) => (cp[k] = cloneDeep(cp[k])));
|         return cp;
 @ ./resources/js/tool.js 1:0-37
 @ multi ./resources/js/tool.js ./resources/sass/tool.scss

我的代码（到目前为止）是：

import VuexORM from '@vuex-orm/core'

Nova.booting((Vue, router, store) => {
    router.addRoutes([
        {
            name: 'planning-tool',
            path: '/planning-tool',
            component: require('./components/NewTool'),
        },
    ])

    // Create a new instance of Database.
    const database = new VuexORM.Database()
    
    // TODO ...
})

有人有什么建议吗？我知道我可以使用普通的 Vuex 存储，但是 vuex-orm 添加了很多不错的功能（我已经习惯了），我会花很多时间通过循环访问普通对象并加载其他关系来将它们用作模型。

更进一步

为了超越自己，我应该如何注册 vuex-orm 数据库插件，因为我所能找到的只是使用直接传递的 (VuexORM) 插件创建一个 Vuex 商店。我读过一个插件只是以商店为唯一参数的功能，那么这样的东西会起作用吗？我听说当你这样使用它时它并不总是有效。

const plugin = VuexORM.install(database)
plugin(store)

欢迎任何关于尝试什么的建议，我已经做了很长一段时间了......

Answer 1

问题出在 webpack 和/或 Laravel mix 1 上。我们通过添加 babel 依赖项和升级 Laravel mix tot ^6.0.19 解决了这个问题。

我们的package.json 是：

{
    "private": true,
    "scripts": {
        "dev": "npm run development",
        "development": "mix",
        "watch": "mix watch",
        "watch-poll": "mix watch -- --watch-options-poll=1000",
        "hot": "mix watch --hot",
        "prod": "npm run production",
        "production": "mix --production"
    },
    "devDependencies": {
        "@babel/core": "^7.14.3",
        "@babel/plugin-transform-runtime": "^7.14.3",
        "@babel/preset-env": "^7.14.4",
        "@vuex-orm/core": "^0.36.4",
        "babel-loader": "^8.2.2",
        "cross-env": "^5.0.0",
        "laravel-mix": "^6.0.19",
        "vue": "^2.6.14",
        "vue-loader": "^15.9.7",
        "vuex": "^3.6.2"
    },
    "dependencies": {
        "@babel/runtime": "^7.14.0"
    }
}

我们的.babelrc 是：

{
    "presets": [
        [
            "@babel/preset-env",
            {
                "useBuiltIns": false
            }
        ]
    ],
    "plugins": [
        "@babel/transform-runtime"
    ]
}

我们的tool.js 是：

import VuexORM from '@vuex-orm/core'
import ExampleModel from './models/ExampleModel'
import Tool from './components/Tool'

Nova.booting((Vue, router, store) => {
    router.addRoutes([
        {
            name: 'planning-tool',
            path: '/planning-tool',
            component: Tool,
        },
    ])

    // Create a new instance of Database.
    const database = new VuexORM.Database()

    database.register(ExampleModel)

    const plugin = VuexORM.install(database)
    plugin(store)
})

我希望这对将来的某人有所帮助。