Setup issues with vue3 - Item.api is not a function

Hello 👋

vuex-orm and this plugin look great! Thanks for building it. However, I’m having a lot of trouble setting it up locally. I’m using:

• “vue”: “^3.0.5”,
• “vuex”: “^3.6.2”,
• “@vuex-orm/core”: “^0.36.3”,
• “@vuex-orm/plugin-axios”: “^0.9.4”,

This is how I’ve set it up…

....
import VuexORM from '@vuex-orm/core'
import Item from '@/models/Item'
import Vuex from "vuex"

import VuexORMAxios from '@vuex-orm/plugin-axios'
import axios from 'axios';

VuexORM.use(VuexORMAxios, { axios })

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


// Register Models to Database.
database.register(Item);

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

const app = createApp(App)
  .use(store)
  .use(IonicVue)
  .use(router);

router.isReady().then(() => {
  app.mount('#app');
});

I have created a simple model and am calling the api method like so: await Item.api().get('https://example.com/api/users')

This unfortunaly produces these errors: Uncaught Error: [vuex] must call Vue.use(Vuex) before creating a store instance. and Item.ts?93a1:53 Uncaught (in promise) TypeError: Item.api is not a function

Does this plugin support vue3?

Thanks 😃

[cuebit]

@entermix As far as I understand, plugin-axios 0.9.4 is not compatible with Vuex 4? No way to use plugin-axios with VueJS 3, Vuex 4?

plugin-axios is a plugin for Vuex ORM, not Vuex/Vue. It’s compatibility is irrelevant to the version of Vue/Vuex. However, it’s compatibility is dependent on the version of Vuex ORM. 0.9.4 supports vuex-orm, not vuex-orm-next. Both iterations are compatible with Vuex 4.

@entermix The last commit for plugin-axios-next was almost a year ago, is this package abandoned? As far as I understand, the minimum functionality is not supported.

It’s not abandoned. It’s currently not in a position to have core features implemented since they have yet to be finalised. Moreover, the state of vuex-orm-next is being addressed, minimum functionality will therefore encounter breaking changes quantitively while its dependent repo undergoes continued adoption.

To reiterate, the fundamentals of this plugin behave as a wrapper for axios. The underlying functionality of the plugin reduces the arduous nature of handling requests/responses. That said, the simplicity of using axios with vuex-orm-next is by passing your response data to the desired persisting method (insert, update, etc).

The repository pattern introduced in vuex-orm-next makes this a walk in the park. For example:

import axios from 'axios'
import { Repository } from '@vuex-orm/core'

class UserRepo extends Respository {
  use = User

  async fetch() {
    const { data } = await axios.get('...')

    this.fresh(data.data)
  }
}

[entermix]

@johnrix, @cuebit Thanks! Hopefully soon we will be able to use the new version of plugin-axios 😃