vuex-orm/vuex-orm-examples

The example application to demonstrate the use case of the Vuex ORM.

Vuex ORM Examples

The example application to demonstrate the use case of the Vuex ORM. It's a simple ToDo application which can add assignee to each todo. You can see how Vuex ORM connects those two models – Todo and Assignee – and how to create, edit and delete them.

Running The Example

Clone this repository and then run following commands.

$ npm install
$ npm run serve

# Or with yarn.

$ yarn install
$ yarn serve

Then you can access http://localhost:3000 to play with the app!

Contribution

If you have any idea to make this example application easier to understand to people who are new to the Vuex ORM, please open an issue, or pull request 🎉

vuex-orm-examples's Issues

retrieving many-to-many relationships

Hi,

I am receiving the following error when trying to retrieve a man-to-many relationship...
"TypeError: Cannot read property 'data' of undefined"

My models are setup like so:

export default class User extends Model {
    static get entity () {
        return 'users'
    }
    static fields () {
        return {
            id: this.attr(null),
            name: this.attr(''),
            email: this.attr(''),
            roles: this.belongsToMany(Role, RoleUser, 'user_id', 'role_id')
        }
    }
}

export default class Role extends Model {
    static get entity () {
        return 'roles'
    }
    static fields () {
        return {
            id: this.attr(null),
            name: this.attr(''),
            permissions: this.belongsToMany(Permission, RolePermission, 'role_id', 'permission_id')
        }
    }
}

export default class Permission extends Model {
    static get entity () {
        return 'permissions'
    }
    static fields () {
        return {
            id: this.attr(null),
            name: this.attr(''),
        }
    }
}

export default class RoleUser extends Model {
    static get entity () {
        return 'role_users'
    }
    static primaryKey () {
        return ['role_id', 'user_id']
    }
    static fields () {
        return {
            role_id: this.attr(null),
            user_id: this.attr(null)
        }
    }
}

export default class RolePermission extends Model {
    static get entity () {
        return 'role_permissions'
    }
    static primaryKey () {
        return ['role_id', 'permission_id'];
    }
    static fields () {
        return {
            role_id: this.attr(null),
            permission_id: this.attr(''),
        }
    }
}

Inside my component's created() method i am calling to create the user data:

const data = {
                    id: 1,
                    name: 'John Doe',
                    email: '[email protected]',
                    roles: [
                        {
                            id: 1,
                            name: 'admin',
                            permissions: [
                                {
                                    id: 1,
                                    name: 'create user'
                                }
                            ]
                        },
                    ]
                };

                this.$store.dispatch('entities/users/create', { data });

If i then make a computed property in the same component:

users() {
    return this.$store.getters['entities/users/all']();
}

Then this works OK!!

But if i try to get the role relation:

users() {
    return this.$store.getters['entities/users/query']()
                    .with('roles')
                    .get();
}

It gives the error above!!!

how to include vuex-orm-localforage?

I am wondering how to include vuex-orm-localforage into this demo app.

I tried to include the following code from the readme

import VuexORMLocalForage from 'vuex-orm-localforage'

const database = new VuexORM.Database()

VuexORM.use(VuexORMLocalForage, {
  database
})

into src/store/index.js so it now looks like:

import Vue from 'vue'
import Vuex from 'vuex'
import VuexORM from '@vuex-orm/core'
import VuexORMLocalForage from 'vuex-orm-localforage'
import database from '@/database'

Vue.use(Vuex)

VuexORM.use(VuexORMLocalForage, {
  database
})

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

export default store

But I am not able to enter any user name nor todo. Maybe this approach was to naiv, but how can it be accomplished?