Question: How to Updating Relationship
borsTiHD opened this issue · comments
First of all, thanks for this amazing project. :)
Secondly... yes... I searched a lot and I tried to solve my problem with the docs:
- https://vuex-orm.org/guide/data/inserting-and-updating.html#updating-relationships
- https://github.com/vuex-orm/vuex-orm-examples-nuxt
At this point I'm really confused how it should work correctly.
I'm just at the beginning. Using Models on its own are easy to understand, but when I try to add relationships I don't get anywhere.
Here is my example:
// Parent Model - Device.js:
import { Model } from '@vuex-orm/core'
import Uptime from '@/models/Uptime'
export default class Device extends Model {
static entity = 'devices'
static primaryKey = ['id']
static fields() {
return {
id: this.uid(),
name: this.string(''),
uptime: this.hasOne(Uptime, 'device_id')
}
}
}
// Child Model - Uptime.js:
import { Model } from '@vuex-orm/core'
export default class Uptime extends Model {
static entity = 'uptimes'
static primaryKey = ['id']
static fields() {
return {
id: this.uid(),
device_id: this.string(null),
uptime: this.string('').nullable()
}
}
}
// database.js:
import { Database } from '@vuex-orm/core'
import Device from '@/models/Device'
import Uptime from '@/models/Uptime'
const database = new Database()
// Registering Models
database.register(Device)
database.register(Uptime)
export default database
// Nuxt Plugin: vuex-orm.js:
import VuexORM from '@vuex-orm/core'
import database from '@/database'
export default ({ store }) => {
VuexORM.install(database)(store)
}
// Nuxt ~ default.vue layout:
import Device from '@/models/Device'
export default {
async fetch() {
const deviceName = 'test'
const device = await Device.create({ data: { name: deviceName } })
const deviceId = device.devices[0].id
console.log('deviceId:', deviceId)
this.setCurrentDeviceId(deviceId) // Vuex action: 'device/setCurrentDeviceId'
console.log(this.getCurrentDeviceId) // Vuex getter: 'device/getCurrentDeviceId'
},
...
}
This is where my real problem hides.
// My component.vue where I try to update my uptime state:
...
methods: {
getUptime() {
const url = '/device/uptime'
this.loading = true
this.$axios.get(url)
.then(async(res) => {
const uptime = res.data.data.uptime // <- Uptime is just a string here
// Updating Device with new uptime
const check = await Device.update({ <-- Here is my problem
// where: this.getCurrentDeviceId, // does not work, because not allowed for relationships
data: {
id: this.getCurrentDeviceId,
uptime: { uptime }
}
})
console.log('check:', check)
})
...
}
}
At this point I think its in a very simple state.
I want to add more models like Uptime
to my parent model Device
in the future.
Many thanks in advance. :)
Edit: Added the way how I register vuex-orm in nuxt.
You don't need to update the Device record - just update the proper Uptime record with the appropriate device_id. Btw since it is a one to one relationship, you might not even need 2 models and just store the uptime in the Device model. Alternatively, you don't need 'id' and 'device_id' on the Uptime model - you can make 'device_id' the primary key so that getting the apropriate Utime for a Device is easier.
Thank you so much for the help. :)
I think I tried that already... but I will try it again.
My example is just for two Models. Device
as main and Uptime
as a secondary.
My plan for the future is to have multiple models in a relationship with Device
(Models like: CPU
, Diskspace
, Memory
, Processes
and more...).
In the future, I would like to have the possibility to create several devices (I have only one device right now) and assign the corresponding values to each device.