How should I structure multiple-use Vue components to load data from different Vuex paths?

Question

I'd like to create a component that I can instantiate multiple times pointing at (loading its data from) different vuex-namespaces. The component will gets most of its data from Vuex. So say I have a Person component, I could instantiate many copies of the Person component, based on different paths into vuex.

The best way I've figured out how to do this is to pass a vuex path as a prop, but then I don't know how to use mapGetters and friends, because they require a namespace at the time the .vue file is instantiated.

I'd appreciate insight into the best "Vue way" to structure this. Here's the closest approach I've figured out at the moment.

Person.vue:

<template>
    <div>person {{name}} is {{age}} years old</div>
</template>

<script>
  export default {
    props: ['vuexNamespaceToLoadFrom'],

    // FIXME: how do I do a mapGetters with a dynamic namespace that's 
    // set through props???

    // I can't do the following since props aren't in scope yet :-(
    ...mapGetters(this.vuexNamespaceToLoadFrom, [ 'name', 'age'])

  }
</script>

Instantiating a few Person multiple-use components that load their properties from different vuex-namespaces:

<Person vuex-namespace-to-load-from="api/jim">
<Person vuex-namespace-to-load-from="api/someotherpath/rachid">
<div>
 <Person vuex-namespace-to-load-from="api/alternatepeople/grace">
</div>

Richard Matsen · Accepted Answer · 2018-03-15 23:44:57Z

To expand the problem definition a little, this

export default {
  props: ['vuexNamespaceToLoadFrom'],
  ...
  computed: {
    ...mapGetters(this.vuexNamespaceToLoadFrom, [ 'name', 'age'])
  }
}

is a declarative object used by Vue to create instances of components, so instance properties can't be used directly in the helpers like mapGetters.

However, this discussion Generating computed properties on the fly shows a way to defer the evaluation of the instance property.

Essentially, the body of the computed get() will not be evaluated until the instance is fully mounted, so references to this.$store and this[namespaceProp] will work here.

Adapting it to your scenario,

helper function

function mapWithRuntimeNamespace({namespaceProp} = {}, props = []) {
  return props.reduce((obj, prop) => {
    const computedProp = {
      get() {
        return this.$store.getters[this[namespaceProp] + '/' + prop]
      }
    }
    obj[prop] = computedProp
    return obj
  }, {})
}

usage

export default {
  props: ['vuexNamespaceToLoadFrom'],
  ...
  computed: {
    ...mapWithRuntimeNamespace(
      { namespaceProp: 'vuexNamespaceToLoadFrom' }, 
      ['name', 'age']
    )
  }
}

jsardev · Accepted Answer · 2018-03-15 18:42:01Z

0

How about this?

Person component:

export default (vuexNamespace) => ({
  ...mapGetters(vuexNamespace, ['name', 'age']) 
})

Parent component:

export default {
  components: {
    Person: Person('someNamespace')
  }
}

Didn't test it out, but I think it should work :)

answered Mar 15, 2018 at 18:42

jsardev

1,3881 gold badge13 silver badges29 bronze badges

2 Comments

Seth Over a year ago

I like the thinking, but it doesn't work for vue-loader

jsardev Over a year ago

Seems like they didn't consider this kind of usage :) Well, I don't have any other ideas for now, sorry :(

Collectives™ on Stack Overflow

How should I structure multiple-use Vue components to load data from different Vuex paths?

2 Answers 2

Comments

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related