Comments (10)
@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)
}
}
from plugin-axios.
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
from plugin-axios.
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
from plugin-axios.
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.
from plugin-axios.
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]
from plugin-axios.
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.
from plugin-axios.
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?
from plugin-axios.
@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.
from plugin-axios.
@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 👍
from plugin-axios.
@johnrix, @cuebit Thanks! Hopefully soon we will be able to use the new version of plugin-axios :)
from plugin-axios.
Related Issues (20)
- API Response then(response) not equal catch(response) HOT 1
- API request result.entities contains records in a different order than they were returned from the server. HOT 1
- issue with using with nuxt-i18n, language is appended to all api calls HOT 2
- persistBy: "create" not deleteAll data on relation HOT 5
- Missing related polymorphic model on store entities after data transformation HOT 2
- Handling of response errors HOT 1
- Update relationships on fetch HOT 1
- Inserting multiple records at once. HOT 2
- Retrieving Users with M:M relationship is causing infinite loop in mounted() HOT 3
- Outdated axios dependency HOT 1
- axios config URL HOT 1
- Relationships dataKey HOT 1
- retrieve store from single get HOT 2
- Ability to extend the Request class (global custom actions?) HOT 1
- Request: please pass the model class to dataTransformer HOT 2
- InsertIgnore HOT 1
- Documentation for persistyBy option: Add link to explanation of insert vs. create
- Mapping multiple entities from one response HOT 1
- Entity Briefly Enters a Truncated State Before Deletion When Using Vuex-ORM Axios Plugin when i dont add delete option
Recommend Projects
-
React
A declarative, efficient, and flexible JavaScript library for building user interfaces.
-
Vue.js
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
-
Typescript
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
-
TensorFlow
An Open Source Machine Learning Framework for Everyone
-
Django
The Web framework for perfectionists with deadlines.
-
Laravel
A PHP framework for web artisans
-
D3
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
-
Recommend Topics
-
javascript
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
-
web
Some thing interesting about web. New door for the world.
-
server
A server is a program made to process requests and deliver data to clients.
-
Machine learning
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
-
Visualization
Some thing interesting about visualization, use data art
-
Game
Some thing interesting about game, make everyone happy.
Recommend Org
-
Facebook
We are working to build community through open source technology. NB: members must have two-factor auth.
-
Microsoft
Open source projects and samples from Microsoft.
-
Google
Google ❤️ Open Source for everyone.
-
Alibaba
Alibaba Open Source for everyone
-
D3
Data-Driven Documents codes.
-
Tencent
China tencent open source team.
from plugin-axios.