Managing a closure-styled vuex store

Let’s imagine I have this vuex module:

export default {
  state: {
    tabA: {
      name: 'tabA',
    },
    tabB: {
      name: tabB',
    },
  },

  getters: {
    getName: (state) => (tab) => state[tab].name,
  },

  namespaced: true,
}

I will create N tabs in my app, and all of them have the same properties. When I am in my tabA.vue component I want to access to my tab name, so I use the getter like this:

this.$store.getters['tabsModule/getName']('tabA')

Fair enough! It works perfectly. But I’m looking for something better. I would like to know if there’s some way for avoiding that (‘tabA’) part and simply use this.$store.getters[‘tabsModule/getName’], and then the store will magically know that I’m accessing to the tabA object.

Is that even possible? I have the idea, but I don’t know how to make it happen :sob:

Simply put, no. How would the app know which tab to reference without being told so?

It sounds like you may want reusable Vuex modules. You will still have to reference each with their name tabA, tabB, etc. but each module is self contained.

1 Like

That’s exaclty what I was looking for. I’ve already implemented it and works wonders.

Thank you!

1 Like