Vuex getter undefined



  • 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 !





  • @Incremental And getters are computed and not method



  • @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 ???



  • @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



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


Log in to reply