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 !