vuex-orm / vuex-orm

The Vuex plugin to enable Object-Relational Mapping access to the Vuex Store.

Home Page:https://vuex-orm.org

Geek Repo:Geek Repo

Github PK Tool:Github PK Tool

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:

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.