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

Thanks dobbel, but I already made a complex store with Axios use , in a regular Vue App.
If I post here it’s because I moved to Quasar and I’m unable to make a function call with parameters in the store.
Cf. my other post : https://forum.quasar-framework.org/topic/6927/vuex-getter-undefined/4

Hello, I’m quite new to Vue and I’d like to have global functions manipulating color palettes which could be called from evry component to manipulate and storing color parameters.

Excuse my naive question, but should I use Vuex for this ?
I tried during many days to have global functions in a store, without success as they are always undefined…

Is there a better way to declare global functions and data in Vue or Quasar ?
Thanks

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

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 !

Hello, I’m driving crazy trying to adapt colorschemes I found in Dashblocks.
https://slanatech.github.io/dashblocks-template/#/
It’s very powerfull and made for complex graphs. I’d like something more simple to parameter a dashboard like yours.
I’m trying to use the store for this and hope to make conditional colors for displays, but I’m still learning Vue…

Sorry, here it is full : https://slanatech.github.io/dashblocks-template/#/

Very nice job !
Have you thought to have different palettes, like in Dashblocks, it would be very nice.

Hello, I’m still discovering Quasar with Dashblocks and would like to have a palette selector like in the settings : https://slanatech.github.io

As the colors are complex for all the graph libraries, I would like to make it more simple.
Has anybody made it with static tables ?
Thanks

Thank you for your trick. My menu contains :

  <q-item
    v-else
    clickable
    v-ripple
    v-bind:key="item.link"
    :to="item.link"
    exact
    :class="SubItemClass"
    :active-class="itemActiveClass"
  >

If I replace :class=“SubItemClass” by :class="{ ‘myclass’: $q.dark.isActive }"
there is no effect.

I added menu background colors in my store and I change them dynamically when Light or Dark mode before using them in the menu logic.
All is perfectly configurable, but for the selected item, I can only highlight it with CSS.

So is it possible to keep my :class=“SubItemClass” and combine it with “{ ‘myclass’: $q.dark.isActive }” ?