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

[7ammer]

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

[7ammer]

Just to add.
If I update vuex to v4 and change the setup like so:

...
import { createStore } from "vuex"
...
const store = createStore({
  plugins: [VuexORM.install(database)]
})
...

Vuex no longer complains but I'm still seeing this error:
Uncaught (in promise) TypeError: Item.api is not a function

[johnrix]

Seeing a similar error, having upgraded to latest drafts of VuexORM and this plugin:

    "@vuex-orm/core": "^1.0.0-draft.9",
    "@vuex-orm/plugin-axios": "^1.0.0-draft.2",

Here's my store setup:

// import Vuex from 'vuex'
import { createStore, createLogger } from 'vuex'
import api from 'boot/axios'
import VuexORM from '@vuex-orm/core'
import VuexORMAxios from '@vuex-orm/plugin-axios'

VuexORM.use(VuexORMAxios, {
    axios: api,
    dataTransformer: ({ data, headers }) => {
        return data.data
    }
})

/*
 * If not building with SSR mode, you can
 * directly export the Store instantiation;
 *
 * The function below can be async too; either use
 * async/await or return a Promise which resolves
 * with the Store instance.
 */

export default function (/* { ssrContext } */) {
    const Store = createStore({
        modules: {
            // example
        },

        // enable strict mode (adds overhead!)
        // for dev mode only
        strict: process.env.DEBUGGING,
        plugins: [VuexORM.install(), createLogger()]
    })

    return Store
}

and the component where I am trying to use it:

import { mapRepos } from '@vuex-orm/core'
import { Article } from '~/models/modelhierarchy'

export default {
    name: 'Article',
    data() {
        return {
            article: null
        }
    },
    props: {
        id: {
            type: Number,
            default: null,
        },

        alias: {
            type: String,
            default: '',
        },
    },
    computed: {
        ...mapRepos({
            articleRepo: Article,
        }),
    },
    async mounted() {
        const query = this.id ? `id=${this.id}` : `alias=${this.alias}`
        const result = await this.articleRepo
            .api()
            .get(`/app.getPageContent?${query}`)
        this.article = result.entities.articles[0]
    }
}

Results in the following:

Uncaught (in promise) TypeError: this.articleRepo.api is not a function

[cuebit]

This plugin is still under development and does not contain any functionality found in the current stable release as of yet (hence this.api does not exist).

I think we need to make note of this in the repo to avoid further confusion.

That said, as soon as vuex-orm-next is in a good place we can start focusing on the ecosystem.

[Charl13]

Yesterday I've had the same issue. After changing the order of the setup in the applications bootstrap process it worked fine.

Here's my store.js file

import Vue from 'vue'
import Vuex from 'vuex'
import VuexORM from '@vuex-orm/core'
import VuexORMAxios from '@vuex-orm/plugin-axios'
import Employee from '~/vue/models/employee'
import axios from 'axios'

Vue.use(Vuex);

VuexORM.use(VuexORMAxios, {
  axios,
  baseURL: '/api/'
});

const database = new VuexORM.Database();

database.register(Employee);

const store = new Vuex.Store({
  plugins: [VuexORM.install(database)]
});

export default store

And the main.js file

import Vue from 'vue'
import store from '~/vue/store'
import EmployeeForm from './employee.vue'

if (document.getElementById('vue-employee-form')) {
  new Vue({
    el: '#vue-employee-form',
    render: (bootstrap) => bootstrap(EmployeeForm),
    store,
  });
}

Related dependencies locked at:

@vuex-orm/[email protected]
@vuex-orm/[email protected]
[email protected]
[email protected]

[johnrix]

This plugin is still under development and does not contain any functionality found in the current stable release as of yet (hence this.api does not exist).

I think we need to make note of this in the repo to avoid further confusion.

That said, as soon as vuex-orm-next is in a good place we can start focusing on the ecosystem.

Thanks @cuebit, I guess as much. Will keep an eye out for updates and just manually fetch my data in the meantime.

[entermix]

I am confused.

As far as I understand, plugin-axios 0.9.4 is not compatible with Vuex 4?

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.

No way to use plugin-axios with VueJS 3, Vuex 4?

[johnrix]

@entermix, yep, that is pretty much what cuebit explained above. You're not missing anything. Charl13 is using the older line-up at present, according to his dependency versions.

I am proceeding on Vue3/Vuex4/Vuex-ORM-next without this plugin for the time being.

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

[cuebit]

@johnrix
I am proceeding on Vue3/Vuex4/Vuex-ORM-next without this plugin for the time being.

That's awesome! We love gathering feedback from users adopting the next branch as to help improve current (and pending) features. Feel free to drop this into the Slack channel at your leisure 👍

[entermix]

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