Vuex Store syntax in quasar ?

[Incremental]

Hello,
can somebody give me sample files for Vuex Store.
All samples have a store in one file, but Quasar split the store in different files.
As I’m trying to adapt Dashblocks App, I get a classical store file :

const state = {
  dark: (localStorage['ub-dark-mode'] || 'false') === 'true',
  menuAutoExpand: (localStorage['ub-menu-auto-expand'] || 'false') === 'true',
  menuMini: (localStorage['ub-menu-mini'] || 'false') === 'true',
  dashboardColorScheme: localStorage['ub-dashboard-color-scheme'] || 'Standard'
};

const getters = {};

const mutations = {
  SET_DARK(state, { dark }) {
    localStorage['ub-dark-mode'] = dark;
    state.dark = dark;
  },
  SET_MENU_AUTO_EXPAND(state, { menuAutoExpand }) {
    localStorage['ub-menu-auto-expand'] = menuAutoExpand;
    state.menuAutoExpand = menuAutoExpand;
  },
  SET_MENU_MINI(state, { menuMini }) {
    localStorage['ub-menu-mini'] = menuMini;
    state.menuMini = menuMini;
  },
  SET_DASHBOARD_COLOR_SCHEME(state, { dashboardColorScheme }) {
    localStorage['ub-dashboard-color-scheme'] = dashboardColorScheme;
    state.dashboardColorScheme = dashboardColorScheme;
  }
};

const actions = {
  setDark({ commit }, { dark }) {
    commit('SET_DARK', { dark: dark });
  },
  setMenuAutoExpand({ commit }, { menuAutoExpand }) {
    commit('SET_MENU_AUTO_EXPAND', { menuAutoExpand: menuAutoExpand });
  },
  setMenuMini({ commit }, { menuMini }) {
    commit('SET_MENU_MINI', { menuMini: menuMini });
  },
  setDashboardColorScheme({ commit }, { dashboardColorScheme }) {
    commit('SET_DASHBOARD_COLOR_SCHEME', { dashboardColorScheme: dashboardColorScheme });
  }
};

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

How could I split it in the different files : states.js, actions.js, getters.js and mutations.js coming with the starting application ?
After a long time searching, I haven’t found clear informations…
Thanks for help

[dobbel]

@Incremental
The file you posted is created as a module to be used by the store in store/index.js

first put your posted code in store/dashboard-store.js

then

store/index.js

// store/index.js
import Vue from "vue";
import Vuex from "vuex";
import Dashboard from './dashboard-store'

Vue.use(Vuex);

export default function({  }/* { ssrContext } */) {
    const Store = new Vuex.Store({ 
        modules: {
            Dashboard 
        },
        // enable strict mode (adds overhead!)
        // for dev mode only
        strict: process.env.DEV
    });
    store = Store   

    return Store;
}

export { store }

[Incremental]

Thanks dobbel for your answer, but it’s what I’ve done.
My question was based on the Quasar structure, how to split this module file in state, … mutations file ?

for example state.js empty file is
   export default function() {
      return {
         //
      };
   }

and the origine module file contains :

const state = {
  dark: (localStorage['ub-dark-mode'] || 'false') === 'true',
  menuAutoExpand: (localStorage['ub-menu-auto-expand'] || 'false') === 'true',
  menuMini: (localStorage['ub-menu-mini'] || 'false') === 'true',
  dashboardColorScheme: localStorage['ub-dashboard-color-scheme'] || 'Standard'
};

How to convert “const state=” in “export default function()” ?

[beets]

@Incremental you can just do:

    // state.js
   export default function() {
      return {
           dark: (localStorage['ub-dark-mode'] || 'false') === 'true',
           menuAutoExpand: (localStorage['ub-menu-auto-expand'] || 'false') === 'true',
           menuMini: (localStorage['ub-menu-mini'] || 'false') === 'true',
           dashboardColorScheme: localStorage['ub-dashboard-color-scheme'] || 'Standard'
      };
   }

  // mutations.js

  export function SET_DARK(state, { dark }) {
    localStorage['ub-dark-mode'] = dark;
    state.dark = dark;
  }
  export function SET_MENU_AUTO_EXPAND(state, { menuAutoExpand }) {
    localStorage['ub-menu-auto-expand'] = menuAutoExpand;
    state.menuAutoExpand = menuAutoExpand;
  }
  export function SET_MENU_MINI(state, { menuMini }) {
    localStorage['ub-menu-mini'] = menuMini;
    state.menuMini = menuMini;
  }
  export function SET_DASHBOARD_COLOR_SCHEME(state, { dashboardColorScheme }) {
    localStorage['ub-dashboard-color-scheme'] = dashboardColorScheme;
    state.dashboardColorScheme = dashboardColorScheme;
  }

  // actions.js
  export function setDark({ commit }, { dark }) {
    commit('SET_DARK', { dark: dark });
  }
  export function setMenuAutoExpand({ commit }, { menuAutoExpand }) {
    commit('SET_MENU_AUTO_EXPAND', { menuAutoExpand: menuAutoExpand });
  }
  export function setMenuMini({ commit }, { menuMini }) {
    commit('SET_MENU_MINI', { menuMini: menuMini });
  }
  export function setDashboardColorScheme({ commit }, { dashboardColorScheme }) {
    commit('SET_DASHBOARD_COLOR_SCHEME', { dashboardColorScheme: dashboardColorScheme });
  }

Although note that this isn’t required. Personally I would probably just use the store module as it is, like dobbel suggested. Quasar certainly doesn’t require state/actions/mutations to be split, nor does it even require you to use vuex modules. This is just how quasar sets it up by default.

[Incremental]

Thanks beets for your clear answer.
The split is working, but if not mandatory, I will keep existing one file store.
Thanks again !

[Incremental]

Hello, in complement, could you help me to call my store actions ?
I made an icon toggle button

        <q-btn @click="dark"
          :icon="$q.dark.isActive ? 'nights_stay' : 'wb_sunny'" >
        </q-btn>

and a method called by the button :

methods: {
    dark () {
      How to call my Store : setDark ???
    },

onLoad my computed method is called , but I can’t invoke it from my dark() button method

  computed: {
    dark: {
      get () {
        return this.$store.state.layout.dark;
      },
      set (value) {
        this.setDark({ dark: value });
      }
    },

How could I invoke it ?
Thanks

[walfin]

this.$store.dispatch('setDark',{dark:value});

[Incremental]

Thanks for your answer, but the funny thing is that set setDark actions and mutations are called when the page is loaded (I put alert boxes), but when I write your call, nothing is displayed.
I think the action is not called.
What could be the problem ???

[beets]

@Incremental you have to use namespaced mutations, like:

this.$store.dispatch('Dashboard/setDark',{dark:value});

Replace Dashboard with what ever the module is named in src/store/index.js. For example it is called Dashboard here:

// store/index.js
import Vue from "vue";
import Vuex from "vuex";
import Dashboard from './dashboard-store'

Vue.use(Vuex);

export default function({  }/* { ssrContext } */) {
    const Store = new Vuex.Store({ 
        modules: {
            Dashboard 
        },
        // enable strict mode (adds overhead!)
        // for dev mode only
        strict: process.env.DEV
    });
    store = Store   

    return Store;
}

export { store }

[metalsadman]

@Incremental you should familiarize vuex API also, start with their docs.

[Incremental]

@metalsadman : I already made a full app with MDB, but Quasar has some different syntaxes and I get troubles to adapt my app…

@beets :

1. I corrected my syntax with your index.js, but I get a SyntaxError: \src\store\index.js: Export ‘store’ is not defined
   on the last line.

2. I previously used a namespace mutation like :
   this.$store.dispatch(‘layout/setDark’,{dark:value});
   but setDark is not called from the method ;-((

[metalsadman]

@Incremental wdym? vuex syntax is the same in quasar. What differ is how it’s being created in it’s own store/index.js file, even so it still uses standard vuex API.

About Beet’s snippet above it’s just missing a declaration before the export default. Ie. let store = null, that’s why you’re getting an error.

[Incremental]

Thanks metalsadman, it now works.
In my dark() method I now do :

methods: {
    dark () {
      this.$q.dark.toggle();
      let value = this.$q.dark.mode // Get configured status : auto, true, false
      this.$store.dispatch('layout/setDark', { dark: value });
    },

and my dark mode is persisted between pages.

Well I learnt Vuex with this tuto and used it in an application. The syntax is not exactly the one recommended for Quasar structre (which I think now, is clearer) :
https://vueschool.io/courses/vuex-for-everyone