No More Posting New Topics!

If you have a question or an issue, please start a thread in our Github Discussions Forum.
This forum is closed for new threads/ topics.

Navigation

    Quasar Framework

    • Login
    • Search
    • Categories
    • Recent
    • Tags
    • Popular
    • Users
    • Groups
    • Search

    Vuex Store syntax in quasar ?

    Framework
    5
    13
    4727
    Loading More Posts
    • Oldest to Newest
    • Newest to Oldest
    • Most Votes
    Reply
    • Reply as topic
    Log in to reply
    This topic has been deleted. Only users with topic management privileges can see it.
    • I
      Incremental last edited by

      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 1 Reply Last reply Reply Quote 0
      • dobbel
        dobbel @Incremental last edited by 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 }
        
        1 Reply Last reply Reply Quote 0
        • I
          Incremental last edited by

          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 1 Reply Last reply Reply Quote 0
          • beets
            beets @Incremental last edited by

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

            1 Reply Last reply Reply Quote 0
            • I
              Incremental last edited by

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

              1 Reply Last reply Reply Quote 0
              • I
                Incremental last edited by 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

                1 Reply Last reply Reply Quote 0
                • W
                  walfin last edited by

                  this.$store.dispatch('setDark',{dark:value});
                  
                  1 Reply Last reply Reply Quote 0
                  • I
                    Incremental last edited by

                    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 metalsadman 2 Replies Last reply Reply Quote 0
                    • beets
                      beets @Incremental last edited by

                      @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 }
                      
                      1 Reply Last reply Reply Quote 0
                      • metalsadman
                        metalsadman @Incremental last edited by

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

                        1 Reply Last reply Reply Quote 0
                        • I
                          Incremental last edited by

                          @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 1 Reply Last reply Reply Quote 0
                          • metalsadman
                            metalsadman @Incremental last edited by 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.

                            1 Reply Last reply Reply Quote 0
                            • I
                              Incremental last edited by

                              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

                              1 Reply Last reply Reply Quote 0
                              • First post
                                Last post