[Vuejs]-Vue – Passing props to computed

by

1👍

✅

It looks like you are trying to access one of your vuex getter depending on the foo prop value. The problem is the first time your computed method is evaluated this (the instance of your component) does not exist yet. I’m not sure if mapGetters can handle being dynamically re-evaluated once this exist (I don’t think so). You can try this (edit: does not work, see second solution) :

...mapGetters({
    myTest: this && this.foo ? this.foo+'/someVuexAction' : undefined
})

It probably won’t work, but it’s worth trying.

Second solution, more likely to work, is to define your computed property as follow :

computed: {
  myVuexGetter() {
    return this.foo ? this.$store.getters[this.foo+'/someVuexGetter'] : undefined
  },
}

Side note : you used the terminology someVuexAction but you called it inside mapGetters. If it is not a typo : you should use mapActions to import vuex actions, and actions are not computed properties, they are methods.

0👍

But mapGetters is going to map to a store’s functions. The store doesn’t have a foo, your component does. I think you just want to put a regular function on the computed, not a mapped one.

Consider the example below:

const store = new Vuex.Store({
  state: {
    counter: 5
  },
  getters: {
    counterCount: state => {
      return state.counter;
    }
  }
});

const {
  mapGetters
} = Vuex;

Vue.component("my-el", {
  props: {
    foo: Number
  },
  template: "<div>foo: {{foo}} | fooPlusOne: {{fooPlusOne}} | myTest: {{myTest}}</div>",
  computed: {
    fooPlusOne: function() {
      return this.foo + 1;
    },
    ...mapGetters({
      myTest: "counterCount"
    })
  }
});

const vm = new Vue({
  store,
  el: "#app"
});
<script src="https://unpkg.com/vue@2.5.22/dist/vue.min.js"></script>
<script src="https://unpkg.com/vuex@2.0.0/dist/vuex.min.js"></script>

<div id="app">
  <my-el :foo="8"></my-el>
</div>

Leave a comment