Vuex Store syntax in quasar ?



  • 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



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


  • 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()” ?



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



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


Log in to reply