在Laravel Nova工具中添加Vuex-ORM

Question

有人能帮我把vuex-orm添加到Laravel工具中吗？

Laravel工具的底部有以下内容的tool.js (名称上的'planning-tool'，并且路径可能因工具的名称而异)：

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

如你所见，Laravel已经有了一家商店的礼物。

根据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已经开了一家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数据库插件，因为我所能找到的就是创建一个Vuex商店，直接传递(VuexORM)插件。我读过插件只是与商店的功能，作为唯一的论点，所以这样的东西能工作吗？我读到过，当你像这样使用它时，它并不总是起作用。

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

任何关于该尝试什么的建议都是受欢迎的，我已经做了很久了.

Answer 1

问题是webpack和/或Laravel 1，我们通过添加babel依赖项和升级Laravel ^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)
})

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