model.$entity is not a function

[jpmc3630]

We are using vuex4 and vue3 and just moved from @vuex-orm/core 0.36.4 to the 1.0.0-draft.16 version and getting this error when trying to register model with Database.register method.

The old @vuex-orm/core 0.36.4 version was working with vue3 and vuex4, though we are experiencing what appears to be a minor bug so keen to try the new version. Thanks.

vuex-orm.esm-browser.js?d318:2174 Uncaught TypeError: model.$entity is not a function
    at Database.register (vuex-orm.esm-browser.js?d318:2174:1)
    at eval (index.js?c97f:57:1)
    at Module../resources/js/database/index.js (app.js:50:1)
    at __webpack_require__ (manifest.js:31:42)
    at eval (store.js:4:67)
    at Module../resources/js/state/store.js (app.js:633:1)
    at __webpack_require__ (manifest.js:31:42)
    at eval (auth.js:8:70)
    at Module../resources/js/includes/auth.js (app.js:61:1)
    at __webpack_require__ (manifest.js:31:42)

database/index.js

import VuexORM from '@vuex-orm/core'
import { Database } from '@vuex-orm/core'
import VuexORMLocalForage from 'vuex-orm-localforage'

import AuditObjectHazard from '@/models/audit_object_hazard'
import auditObjectHazard from '@/state/audit_object_hazard'

import AuditObjectSign from '@/models/audit_object_sign'
import auditObjectSign from '@/state/audit_object_sign'

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

// Register Models to the database.
database.register(AuditObjectHazard, auditObjectHazard)
database.register(AuditObjectSign, auditObjectSign)

VuexORM.use(VuexORMLocalForage, {
  database,
  localforage: {
    name: 'vuex',
    version: 1.0,
  },
  actions: {
    $get: '$getFromLocal',
    $fetch: '$fetchFromLocal',
    $create: '$createLocally',
    $update: '$updateLocally',
    $delete: '$deleteFromLocal'
  }
})

// Create Vuex database plugin
const ormStore = VuexORM.install(database)

export default ormStore

store

import { createStore } from 'vuex'
import createPersistedState from "vuex-persistedstate";
import ormStore from '@/database'

import auth from '@/state/auth'
import system from '@/state/system'

const vuexPersisted = new createPersistedState({
  key:'slsa-bm-v1',
  storage: window.localStorage,
  reducer: state => ({
    auth: state.auth,
    system: state.system,
    loading: state.loading,
    location: state.location
  })
})

export default createStore ({
  modules: {
    auth,
    system
  },
  plugins: [ormStore, vuexPersisted],
})

models

// Audit Model
import { Model } from '@vuex-orm/core'
export default class AuditObjectHazard extends Model {
  static entity = 'auditObjectHazard'
  static primaryKey = ['audit_object_id', 'hazard_object_id']

  static fields () {
    return {
      audit_object_id: this.attr(null),
      hazard_object_id: this.attr(null),
    }
  }
}

using the store the vue 3 way

const app = createApp({
  ...
})
app.use(store)

[cuebit]

Did you read the docs? There is no longer a need to register models.

[jpmc3630]

Ok so does this mean the vuex-orm-localforage plugin doesn't work with vuex-orm-next ?

[jpmc3630]

Our app is based around the localforage plugin, so taking a bit of a look at what it would take to migrate it.

The components object passed to the plugin on install .. mine is looking a bit bare! I tried looking at the @vuex-orm/plugin-axios and @vuex-orm/plugin-soft-delete plugins to see how they are working, but looks like they aren't ready for vuex-orm-next either.

if you could give us a few tips would be good. Thanks