Vuefire: Decorators for compatability with vuex-module-decorators

Created on 20 Jun 2019  路  8Comments  路  Source: vuejs/vuefire

Would be great if we could do things like:

@Module
export default class Collection extends VuexModule {

  documents = [];

  @FirestoreAction
  bindCollection({ context }, name: string) {
    context.bindFirestoreRef('documents', db.collection(name));
    context.unbindFirestoreRef('documents');
  }
}

Would allow actions and state to be more true to how they look in Vanilla Vuex while also making them typesafe.

RTDB contribution welcome docs firestore

Most helpful comment

Now that I think about it, I agree - it doesn't belong in this package. I wrote a very simple vuexfire-decorators as a separate package. I'll release it as soon as it's hardened.

when combined with vuex-module-decorators and typescript, your todo example (as a module) looks like:

@Module
export default class TodoState extends VuexModule {

  public todos: Todo[] = [];

  @FirestoreBind('todos')
  public bindTodosRef() {
    return db.collection('todos');
  }
}

All 8 comments

vuex-module-decorators not being an official library, I don't want to directly expose the decorator on vuefire, instead we could add a page to the cookbook docs explaining how to do

Now that I think about it, I agree - it doesn't belong in this package. I wrote a very simple vuexfire-decorators as a separate package. I'll release it as soon as it's hardened.

when combined with vuex-module-decorators and typescript, your todo example (as a module) looks like:

@Module
export default class TodoState extends VuexModule {

  public todos: Todo[] = [];

  @FirestoreBind('todos')
  public bindTodosRef() {
    return db.collection('todos');
  }
}

I'd like to see how this is done -- @tommyo any chance you could release this or at least show a workaround?

@tommyo I would also like to see this

@tommyo same here!

@tommyo, even if the workaround isn't hardened yet, sharing a loose version to implement in the meantime would be really helpful.

@tommyo, can you share a link on how did you implement the decorator firestorebind ? Even if it is not ready for productio yet

Now that I think about it, I agree - it doesn't belong in this package. I wrote a very simple vuexfire-decorators as a separate package. I'll release it as soon as it's hardened.

when combined with vuex-module-decorators and typescript, your todo example (as a module) looks like:

@Module
export default class TodoState extends VuexModule {

  public todos: Todo[] = [];

  @FirestoreBind('todos')
  public bindTodosRef() {
    return db.collection('todos');
  }
}

Looks awesome! Any update on this?

Was this page helpful?
0 / 5 - 0 ratings

Related issues

ConnerFrancis picture ConnerFrancis  路  6Comments

weavermedia picture weavermedia  路  4Comments

KMolendijk picture KMolendijk  路  3Comments

mkharibalaji picture mkharibalaji  路  3Comments

dev-kr2020 picture dev-kr2020  路  4Comments