1

有人可以帮我添加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)

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

4

1 回答 1

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)
})

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

于 2021-06-11T07:08:55.957 回答