Vuex getter undefined

Incremental

Hello, it’s many days I’m trying to use a store in Quasar, reading all the docs.
But I get in Console & debuger the following errors :

[Vue warn]: Error in mounted hook: "TypeError: this.$store.getters.getColorScheme is undefined"

TypeError: this.$store.getters.getColorScheme is undefined

I have store index with :

import layout from "./layout";
import colors from "./colors";
Vue.use(Vuex);
export default function(/* { ssrContext } */) {
   const Store = new Vuex.Store({
      modules: { layout, colors  },

      // enable strict mode (adds overhead!)
      // for dev mode only
      strict: process.env.DEV
   });

   return Store;
}

My store colors.js contains :

const state = {
....
};

const getters = {
   getColorScheme: (state, name) => {
      return "toto";
   }
};

const mutations = {
....
};

const actions = {
....
};

export default {
   namespaced: true,
   state,
   getters,
   mutations,
   actions
};

And finally my component, where I get the error :

<script>
import { mapGetters } from "vuex"; // Maps store getters -> cf. methods:
import { mapActions } from "vuex"; // Maps store getters -> cf. methods:

export default {
  name: "Settings",
  components: {
  },

  //scoped variables in this component
  data () {
    return {
      colorSchemaOptions: [ "default" ]
    };
  },

  computed: {
    ...mapGetters({
      getColorScheme: "colors/getColorScheme"
    })
  },

  watch: {
  },

  mounted () {
    this.initColors();
  },

  methods: {
    ...mapActions({ // import { mapActions } from "vuex";
      setDark: "layout/setDark",
      setMenuMini: "layout/setMenuMini",
      setMenuAutoExpand: "layout/setMenuAutoExpand",
      setDashboardColorScheme: "layout/setDashboardColorScheme"
    }),
    initColors () {
      let colorScheme = this.$store.getters.getColorScheme[this.dashboardColorScheme];
    },
  }
};
</script>

If I type :

let colorScheme = this.$store.getters.getColorScheme(this.dashboardColorScheme);

I get in the Firefox debugger :
Paused on exception
TypeError: this.$store.getters.getColorScheme is not a function

What could be wrong in my initColors() function ?
Thanks for your help !

patryckx

@Incremental

https://vuex.vuejs.org/guide/getters.html#method-style-access

patryckx

@Incremental And getters are computed and not method

Incremental

@patryckx I modified :

const getters = {
   getColorScheme: state => name => {
      return "toto";
   }

but my call

let colorScheme = this.$store.getters.getColorScheme(this.dashboardColorScheme);

still returns the error :
Paused on exception
TypeError: this.$store.getters.getColorScheme is not a function

even if I move my call in computed:
Why do I receive this error, everything is declared ???

dobbel

@Incremental

You’re mixing MapGetters with explicit store getter calls.

You either use the explicit store getter call like:
this.$store.getters.getColorScheme

or you use ( with mapGetters) :
this.myMappedGetterFunction()

BUT because your getter getColorScheme is in a vuex module colors you have to do it like this:

explicit store call ( without mapgetters):

let colorScheme = this.$store.getters["colors/getColorScheme"](this.dashboardColorScheme)

With mapgetters:

computed: {
   ...mapGetters({
     getColorScheme: 'colors/getColorScheme',
     anotherGetter: 'colors/anotherGetter',
   })
   // This is the syntax used:
   ...mapGetters('some/nested/module', [
    'someGetter', // -> this.someGetter
    'someOtherGetter', // -> this.someOtherGetter
  ])
}

// somewhere else in for example a method:
let colorScheme = this.getColorScheme(this.dashboardColorScheme)

found a nice vue vuex demo with namespacing(modules):

https://github.com/TwoFistedJustice/vue-namespace-basic

Incremental

Thanks a lot dobbel, you saved me, I was driving crazy since almost a week !
I understand better now ! ;-))

No More Posting New Topics!

Vuex getter undefined