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 :

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

No More Posting New Topics!

Vuex Store syntax in quasar ?