module getters, actions, mutations not being included

[dsl101]

This could be a newbie issue, as I've only just started using the library (converting from another, older vuex-firebase library). But I can't get my own getters, actions, mutations included in the module. Set up like this:

// store/index.js

import Vue from 'vue'
import Vuex from 'vuex'
import VuexEasyFirestore from 'vuex-easy-firestore'

Vue.use(Vuex)

import { Firebase, initFirebase } from 'src/config/firebase.js'
import myModule from './module-example'

const easyFirestore = VuexEasyFirestore(
  [myModule],
  {logging: true, FirebaseDependency: Firebase}
)

const Store = new Vuex.Store({
  plugins: [easyFirestore],
})

initFirebase().catch(error => {
  console.error(error)
})

export default Store

// store/module-example/index.js
import state from './state'
import * as getters from './getters'
import * as mutations from './mutations'
import * as actions from './actions'

export default {
  namespaced: true,
  firestorePath: 'users',
  firestoreRefType: 'collection', // or 'doc'
  statePropName: 'users',
  moduleName: 'myModule',
  getters,
  mutations,
  actions,
  state
}

// store/module-example/getters.js
export const meaning = () => 42

I get the firestore data, but my getter is unknown. If I do it wrong like this:

// store/index.js

import Vue from 'vue'
import Vuex from 'vuex'
import VuexEasyFirestore from 'vuex-easy-firestore'

Vue.use(Vuex)

import { Firebase, initFirebase } from 'src/config/firebase.js'
import myModule from './module-example'

const easyFirestore = VuexEasyFirestore(
  [myModule],
  {logging: true, FirebaseDependency: Firebase}
)

const Store = new Vuex.Store({
  plugins: [easyFirestore],
  modules: {                    // Explicitly include the module
    myModule
  },
})

initFirebase().catch(error => {
  console.error(error)
})

export default Store

I get the console error about duplicate namespace myModule/ for the namespaced module myModule, but I do see my getter and it works.

What is it I'm missing about including custom module getters / actions / mutations, etc.?

[mesqueeb]

@dsl101 I'm not 100% sure, it might be some bug in import * as ~~~ Can you try:

// store/module-example/index.js

export default {
  namespaced: true,
  firestorePath: 'users',
  firestoreRefType: 'collection', // or 'doc'
  statePropName: 'users',
  moduleName: 'myModule',
  getters: {
    meaning: () => 42
  },
}

and see if it works?

If that works, you can try a couple of other things that result in avoiding import * as ~~~ eg. Create a regular object called getters in the separate file and export that object.

_{--
Vuex Easy Firestore was made with ♥ by Luca Ban.
If you use this library in your projects, you can support the maintenance of this library by a small contribution via Github 💜.
You can also reach out on twitter if you want a one-on-one coding review/lesson. 🦜}

[dsl101]

Yes, putting it directly like that does work, so something about import / export. I'll investigate (as dumping getters to the console shows it is an object when imported with import * as getters. This is what it looks like:

At least I know where to poke now :).

[mesqueeb]

@dsl101 I hope you can fix it 😉 I'm afraid there's not much else I can do for you 😅

👨🏻‍🚀 Good luck!!!!

_{--
Vuex Easy Firestore was made with ♥ by Luca Ban.
If you use this library in your projects, you can support the maintenance of this library by a small contribution via Github 💜.
You can also reach out on twitter if you want a one-on-one coding review/lesson. 🦜}

[dsl101]

OK, the problem seems to be in merge() from the merge-anything library. I added some logging into your code, and this is what I see in the console. Note the 'merged' result does not contain the meaning() function which is clearly there in userGetters:

I will raise an issue there and hope they can fix it :).

EDIT: Sorry! Didn't realise that was also your library! I'll raise it there anyway, with a relatively simple repro case :).

[mesqueeb]

@dsl101 hehehehe, i'm everywhere 😄

[dsl101]

Based on what you wrote in that other issue, why wouldn't you write

        getters: {...userGetters, ...pluginGetters(FirebaseDependency)},

instead of

        getters: merge(userGetters, pluginGetters(FirebaseDependency)),

Then your library would just 'work'. import * as getters is a really standard way of separating out the modules getters, actions, etc.

[dsl101]

BTW, I tried this on a local copy, and it worked fine. But I really don't understand what merge_anything is for in this scenario. However, I'd be happy to make a PR replacing with object de-structuring above...

[mesqueeb]

@dsl101 you're right, you don't need merge-anything for anything in this scenario 😛 But, did I write that somewhere? PR's always welcome! But I'm a bit confused on what you mean... Where did I write that? 😄

[mesqueeb]

@dsl101 Oooohh, I see, you're talking about this: https://github.com/mesqueeb/vuex-easy-firestore/blob/dev/src/module/index.ts#L47

hold on i'll fix it 😉

[mesqueeb]

@dsl101 I fixed it in the latest version (v1.35.6) !

Let me know if this made it possible for you to remove that workaround.

_{--
Vuex Easy Firestore was made with ♥ by Luca Ban.
If you use this library in your projects, you can support the maintenance of this library by a small contribution via Github 💜.
You can also reach out on twitter if you want a one-on-one coding review/lesson. 🦜}